使用opacity后,子元素看不清,代码:
.tenant_item{
position: relative;
box-sizing: border-box;
padding: 0.5rem;
background: linear-gradient(-270deg,rgba(23,174,219,0.00), rgba(32,182,237,0.27));
border: 1px solid;
border-image: linear-gradient(-270deg, rgba(23,174,219,0.00), rgba(44,223,255,0.39) 40%, #1ce5f1) 1 1;
opacity: 0.15;
}
图片如下
百度上很多都是通过rgba解决,但是我设置后样式达不到想要的效果,最后通过用伪类元素绝对定位设置透明度后达到设计图效果
解决方案:使用伪类元素设置opacity
.tenant_item{
position: relative;
box-sizing: border-box;
padding: 0.5rem;
}
.tenant_item::before {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: linear-gradient(-270deg,rgba(23,174,219,0.00), rgba(32,182,237,0.27));
border: 1px solid;
border-image: linear-gradient(-270deg, rgba(23,174,219,0.00), rgba(44,223,255,0.39) 40%, #1ce5f1) 1 1;
opacity: 0.15;
}
效果: