html实现背景颜色透明,文字效果不透明
通过伪元素的方式添加遮罩层(给背景颜色,层级,透明度,定位)即可,弹窗原理。
在这里插入图片描述

<li class="contentLi">
					<p class="content-title">{{itemTitles}}</p>
					<div class="bidDataAndIcon">
						<div class="leftData">
							评标时间:<span>14:30:00</span>&nbsp;-&nbsp;<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;
	}
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐