CSS实现背景图⽚透明⽽⽂字不透明效果的两种⽅法
摘要:
⽅法⼀(⽑玻璃效果)：背景图 + 伪类 + flite:blur(3px)
⽅法⼆(半透明效果)：背景图 + 定位 + background:rgba(255,255,255,0.3)
CSS实现背景图⽚透明，⽂字不透明效果的两种⽅法
项⽬中经常会⽤到背景图上放⼀些⽂字介绍，这⾥介绍两种技术来实现背景图⽚透明，⽂字不透明效果，记录⼀下，⽅便⽇后学习。
1.⽑玻璃效果：
背景图 + 伪类 + flite:blur(3px)
.demo1{
width: 500px;
height: 300px;
line-height: 50px;
text-align: center;
}
.demo1:before{
background: url(csssecrets.io/images/tiger.jpg) no-repeat;
background-size: cover;
width: 500px;
height: 300px;
content: "";
position: absolute;
top: 0;
left: 0;
z-index: -1;/*-1 可以当背景*/
-webkit-filter: blur(3px);
filter: blur(3px);
}
<div class="demo1">背景图半透明，⽂字不透明<br />⽅法：背景图+ filter：blur</div>
2.半透明效果：
背景图 + 定位 + background:rgba(255,255,255,0.3)
.demo2-bg{
background: url(csssecrets.io/images/tiger.jpg) no-repeat;
background-size: cover;
width: 500px;
height: 300px;
position: relative;
}
.demo2{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
css特效文字
width: 500px;
height: 300px;
line-height: 50px;
text-align: center;
background:rgba(255,255,255,0.3);
}
<div class="demo2-bg">
<div class="demo2">背景图半透明，⽂字不透明<br />⽅法：定位+ background:rgba(255,255,255,0.3)</div>
</div>
以上所述是⼩编给⼤家介绍的CSS实现背景图⽚透明⽽⽂字不透明效果的两种⽅法，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。