css opacity设置透明度

一.

rgba()只是单纯的可以设置颜色透明度，这样在页面的布局中有很多应用。比如说：让背景出现透明效果，但上面的文字不透明。

RGBA 是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。

二.

value ：指定不透明度，从0.0（完全透明）到1.0（完全不透明）。

opacity属性具有继承性，会使容器中的所有元素都具有透明度；

 

三.

rgba()方法与opacity方法虽然都可以实现透明度效果，但rgba()只作用于元素的颜色或其背景色（设置了rgb(）透明度元素的子元素不会继承其透明效果）。

而opacity具有继承性，既作用于元素本身，也会使元素内的所有子元素具有透明度。至于在什么场景下使用那种方法就要看实际需要了。

<div id="sectionThree">
    <div id="section3Img">
        <img src="../public/img/6.webp" alt="">
        <img src="../public/img/7.webp" alt="">
        <img src="../public/img/8.webp" alt="">
        <!--    <img src="../public/img/9.webp" alt="">-->
    </div>
</div>
  #product>ul>li:nth-child(1){
    background: url("http://15431494.s21i.faiusr.com/2/3/ABUIABACGAAg1s3whgYo7PvrjQQwgC04gB4!450x450.jpg.webp")no-repeat;
    background-size: 100% 100%;
    margin-right: -60px;
    margin-left: 10px;
}
#product>ul>li:nth-child(2){
    background: url("http://15431494.s21i.faiusr.com/2/3/ABUIABACGAAg1s3whgYo7PvrjQQwgC04gB4!450x450.jpg.webp")no-repeat;
    background-size: 100% 100%;
    margin-right: -60px;
    margin-left: 70px;
}
#product>ul>li:nth-child(3){
    background: url("http://15431494.s21i.faiusr.com/2/3/ABUIABACGAAg1s3whgYo7PvrjQQwgC04gB4!450x450.jpg.webp")no-repeat;
    background-size: 100% 100%;
    margin-right: -60px;
    margin-left: 800px;
    margin-top: -260px;
}
@keyframes chuxian {
    from{opacity:0}
    to{opacity: 1}
}

#product>ul>li>.img{
    width: 100%;
    height: 100%;
    opacity: 0;
    background: url("http://g-2.ss.faisys.com/image/imageEffects/imageEffetc_magnifier.png?v=202104251101") no-repeat;
    background-position: center;
    display: inline-block;
}
#product>ul>li>.img:hover{
    animation: chuxian 1s linear 1;
    opacity: 1;
    transition-duration: 1s;
}