方法一(毛玻璃效果)：背景图 + 伪类 + 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(http://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);
}
背景图半透明，文字不透明<br>方法：背景图+ filter：blur
|
2.半透明效果：
背景图 + 定位 + background:rgba(255,255,255,0.3)
.demo2-bg{
background:url(http://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;
width:500px;
height:300px;
line-height:50px;
text-align:center;
background:rgba(255,255,255,0.3);
}
背景图半透明，文字不透明<br>方法：定位+background:rgba(255,255,255,0.3)
|
原文链接：
相关文章
