css设置背景半透明,文字不透明效果
程序员文章站
2024-03-19 18:22:46
...
设置背景半透明,文字不透明效果
一、常见的错误做法
最常见的做法就是:
1.设置元素的opacity,这种设置出来的效果就是内容与背景都是半透明的,严重影响视觉效果。
2.设置background-color:rgba(),这种方式只能设置背景颜色的透明度。
二、正确做法
有两种方法,原理相同:都是要增加一个新盒子,定位到它的上面去。
1.利用伪元素::before,我们通过给伪元素添加透明背景并且定位到元素中。
.demo {
width: 300px;
height: 300px;
text-align: center;
line-height: 50px;
}
.demo::before {
content: '';
/*放上自己喜欢的图片*/
background: url(../img/cat.jpg) no-repeat;
opacity: .3;
background-size: cover;
width: 300px;
height: 300px;
position: absolute;
top: 0;
left: 0;
}
<div class="demo">
背景图片透明,文字不透明
</div>
2.增加一个盒子,我们通过给新盒子添加透明背景并且定位到元素中
```css
.main {
position: relative;
width: 300px;
height: 300px;
text-align: center;
line-height: 300px;
font-size: 20px;
}
.ax {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background: url(../img/cat.jpg) no-repeat;
opacity: .3;
background-size: cover;
}
<div class="main">
背景图片透明,文字不透明
<div class="ax"></div>
</div>
上一篇: Ethercat解析(十三)之fsm_master状态机
下一篇: Unity AI导航寻路系统