html实现背景颜色透明,文字效果不透明
通过伪元素的方式添加遮罩层(给背景颜色,层级,透明度,定位)即可,弹窗原理。
<li class="contentLi"><p class="content-title">{{itemTitles}}</p><div class="bidDataAndIcon"><div class="leftData">评标时间:<span>14:30:00</span> - <span>18:30:00</span></div><div class="isBidAssessment">正在评标 <img src="./img/title-time1.png" alt=""></div></div><div class="peopleState"><div><img src="./img/user-img.png" alt=""><span>张三</span><i class="leave">离开</i></div><div><img src="./img/user-img.png" alt=""><span>张三</span><i class="enter">进入</i></div><div><img src="./img/user-img.png" alt=""><span>张三</span><i class="leave">离开</i></div></div></li>.contentLi {border-radius: 0px 45px 0px 45px;padding: 49px 40px 30px 39px;position: relative;z-index: 2;&::before {content: '';display: block;position: absolute;width: 8px;height: 174px;background: rgba(255, 114, 55, 0.39);left: 0;top: 0;}&::after {//添加一个遮罩层 content: '';width: 100%;height: 100%;background: rgba(37,67,118,8);opacity: .8;top: 0;left: 0;position: absolute;z-index: -1;}