网页图像渐变的方法(HTML+CSS) (渐变与切换)

网页图像渐变的方法(HTML+CSS)(渐变与切换)

Date: 2024.03.27

参考

  1. 色彩 runoob-渐变色工具

渐变 - 水平多图

  • 效果

  • HTML

<div class="conBox pubCon">
 <div class="imgBox">
 <img class="img1" src="" />
 <img class="img2" src="" />
 </div>
 <div class="imgBox">
 <img class="img1" src="" />
 <img class="img2" src="" />
 </div>
 <div class="imgBox">
 <img class="img1" src="" />
 <img class="img2" src="" />
 </div>
</div>
  • CSS
img{ border: none; height: 250px; width: 250px; border-radius: 2% }
.pubCon{ width: 1000px; margin: auto } /* exp1: if you donot need, ignnore */
.conBox{ display: flex; justify-content: space-around } /* exp2: if you have more images */
.imgBox{ height: 250px; width: 250px } /* exp3: fit flex */
.imgBox img{ position: absolute } /* exp4: about position */
.imgBox .img1{ background: linear-gradient(-45deg, #a8cecf, #cee4da) } /* exp5: gave images a color, if you have src value, ignore */
.imgBox .img2{ background: linear-gradient(45deg, #c6ffdd, #f7797d) } /* exp5: gave images other color, if you have src value, ignore */
.imgBox img:first-child{ animation: am 20s ease-in-out infinite; z-index: 1 } /* exp6: about 'z-index' */
@keyframes am {
 0%, 40% { opacity: 1 }
 50%, 90% { opacity: 0 }
}
  • CSS 说明:
  1. 这只是一个控制水平宽度和居中的模板,不需要可以忽略。
  2. 当你有多组图片需要进行一起切换时,可以这样,让图像组分散在水平方向。
  3. 当设置了 flexjustify-content 时,你需要子元素有宽度,以控制它的位置。参考 MDN-flexible参考 MDN-justify-content
  4. position: 让表层与里层进行切换展示,需要图片重叠,你需要将图像 img 设置为绝对位置参考 MDN-position
  5. 如果你的图像有 src 可以不用设置背景,这里只是由于替代 img 内容。
  6. 当你使用 opacity 属性控制了第一个 img 元素透明,将改变其层叠上下文参考 MDN-opacity,需要将其优先设置在上层,使得其 opacity 恢复后能再显示在上层,覆盖掉第二章图。

切换 - 水平多图

  • 效果

  • HTML
<div class="conBox pubCon">
 <div class="outBox"> 
 <div class="imgBox">
 <img class="img1" src="" />
 <img class="img2" src="" />
 </div>
 </div>
 <div class="outBox">
 <div class="imgBox">
 <img class="img1" src="" />
 <img class="img2" src="" />
 </div>
 </div>
 <div class="outBox">
 <div class="imgBox">
 <img class="img1" src="" />
 <img class="img2" src="" />
 </div>
 </div>
</div>
  • CSS
img{ border: none; height: 250px; width: 250px; border-radius: 2% }
.pubCon{ width: 1000px; margin: auto } /* exp1: if you donot need, ignnore */
.conBox{ display: flex; justify-content: space-around } /* exp2: if you have more images */
.outBox{ width: 250px; height: 250px; border-radius: 2%; overflow: hidden } /* exp3: control the width height */
.imgBox{ width: 500px; display: flex } /* exp4: make imgs inline */
/* .imgBox{ float:left; display: flex } /* exp4: other way */
.imgBox .img1{ background: linear-gradient(-45deg, #a8cecf, #cee4da) } /* exp5: gave images a color, if you have src value, ignore */
.imgBox .img2{ background: linear-gradient(45deg, #c6ffdd, #f7797d) } /* exp5: gave images other color, if you have src value, ignore */
.imgBox{ animation: am 10s ease-in-out infinite }
@keyframes am {
 0%, 40% { margin-left: 0 }
 50%, 90% { margin-left: -250px }
}
  • CSS 说明:
  1. 这只是一个控制水平宽度和居中的模板,不需要可以忽略。
  2. 当你有多组图片需要进行一起切换时,可以这样,让图像组分散在水平方向。
  3. 你需要设置一个外部的边界大小,以控制图像显示的内容,即让暂时不需要显示的内容先隐藏起来。
  4. 如果你有很多图片,需要让外框里的图像显示在一行中,这样可以左右切换(当然你可以设置为上下切换,会更方便,这里左右切换只是作为需要的参考)。你可以试着使用 'other way',我不知道如何解释 float 对整个盒子中内容的影响,你可以参考参考 MDN-float(当然,为什么不删除 float呢?只有 flex 可不能让你的图像显示正常,参考参考 MDN-flexible)。
  5. 如果你的图像有 src 可以不用设置背景,这里只是由于替代 img 内容。
作者:appleliushiqiD原文地址:https://www.cnblogs.com/appleliushiqiD/p/18099942

%s 个评论

要回复文章请先登录注册