```html <style type="text/css"> .content_list li{ width: 330px; height: 160px; background-color: #FF6440; position: relative; float: left; margin-right: 24px; overflow: hidden; } ul:after { content: ""; display: block; clear: both; height: 0; visibility: hidden; } .content_list li .mask { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: #000; opacity: 0; -webkit-transition: all .5s; transition: all .5s; } .content_list li:hover .mask { opacity: .4; } </style> <div> <ul class="content_list"> <li> <span>opacity不透明度与transition过度的使用案例</span> <div class="mask"></div> </li> </ul> </div> ``` [效果](https://www.cnblogs.com/lichihua/p/13454577.html) 如果设置父元素的透明度，那么子元素强制继承父元素的透明度，子元素无论怎么设置透明度都和父元素时一样的这时我们可以使用`background: rgba(225, 225, 225, 0.5);`设置父元素的背景就可以了 但是ie不兼容我们还需要设置兼容ie的代码 ~~~css filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000); ~~~ ``` <style type="text/css"> .search-input .wrapper input { /* background:rgba(255,255,255,0.28); */ background-color: transparent; position: relative; top: -67px; z-index: 2; width: 250px; height: 30px; padding-left: 40px; color: #9d9d9d; border-radius: 20px; /* 圆角矩形效果 */ border: 0; /* 取消黑色外框 */ background: url(./img/搜索icon@3x.png) no-repeat #f8f8f8; /* 实现png和背景色共存 */ background-size: 20px 20px; /* 背景图片大小 */ background-position: 10px; /* 背景图片定位：注意这里的第一个属性值是调整左右，第二个属性值是上下 */ } </style> <div class="search-input" style="background:rgba(255,255,255,0.28);"> <div class="wrapper"> <input type="text" placeholder="🔥居家防疫必备" class="search"> </div> </div> ```  ``` <form action=""> <div class="supplier-search" style="background:rgba(255,255,255,0.48);"> <div class="wrapper-search"> <input type="text" placeholder="搜索供应商" class="search"> <button>搜索</button> </div> </div> </form> .supplier-search{ margin-top: (9.5/@vw); margin-left: (17.5/@vw); .wrapper-search{ input{ /* background:rgba(255,255,255,0.28); */ background-color: transparent; opacity: .48; position: relative; top: 0; z-index: 2; width: (342.5/@vw); height: (32.5/@vw); padding-left: 40px; padding-right: (59.5/@vw); color: #000000; border-radius: (15.5/@vw); /* 圆角矩形效果 */ border: (1/@vw) #1A9BFF solid; background: url(../img/person@3x.png) no-repeat #FFF; /* 实现png和背景色共存 */ background-size: (20/@vw) (20/@vw); /* 背景图片大小 */ background-position: (10/@vw); /* 背景图片定位：注意这里的第一个属性值是调整左右，第二个属性值是上下 */ } >button{ z-index: 3; width: (59.5/@vw); height: (27.5/@vw); border-radius: (15.5/@vw); border: 0; color: #FFFFFF; font-size: (13/@vw); background-color: #1A9BFF; font-family: MicrosoftYaHei-Regular; position: absolute; right: (17/@vw); top: (12/@vw); } } } ```  下图必须加上background:url(0) no-repeat;解决input的背景与其他背景不想融的问题 ``` .wrapper header #search { position: absolute; z-index: 2; margin-left: 5.06666667vw; margin-top: 2.4vw; width: 93.33333333vw; height: 8.53333333vw; border: 1px solid #1A9BFF; border-radius: 0 0.66666667vw 0.66666667vw 0; } .wrapper header #search form { display: flex; align-items: center; height: 100%; } .wrapper header #search form #sch { display: flex; height: 100%; background: rgba(255, 255, 255, 0.28); } .wrapper header #search form #sch div { display: flex; align-items: center; } .wrapper header #search form #sch div img { width: 3.73333333vw; height: 3.73333333vw; z-index: 2; opacity: 1; margin-left: 2.13333333vw; margin-right: 1.33333333vw; } .wrapper header #search form #sch div input { background: url(0) no-repeat; width: 71.46666667vw; height: 4.8vw; font-size: 3.2vw; color: #FFF; border: none; } .wrapper header #search form #sch div input::-webkit-input-placeholder, .wrapper header #search form #sch div input:-moz-placeholder, .wrapper header #search form #sch div input::-moz-placeholder, .wrapper header #search form #sch div input:-ms-input-placeholder { color: #FFF; } .wrapper header #search form #btn { background-color: #1A9BFF; border-radius: 0 0.66666667vw 0.66666667vw 0; } .wrapper header #search form #btn button { color: #FFF; font-size: 3.46666667vw; line-height: 3.73333333vw; width: 14.66666667vw; height: 8.53333333vw; background-color: #1A9BFF; border-radius: 0 0.66666667vw 0.66666667vw 0; border: 0; } ```