word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: " sans="" font-size:="" font-style:="" font-variant-ligatures:="" a="" href="/fw/photo.html" target="_blank" :="" font-weight:="" letter-spacing:="" orphans:="" text-align:="" text-indent:="" text-transform:="" white-space:="" widows:="" word-spacing:="" -webkit-text-stroke-width:="">摘要:
方法一(毛玻璃效果):背景图 + 伪类 + 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);
}
背景图半透明,文字不透明
方法:背景图+ 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);
}
背景图半透明,文字不透明
方法:定位+background:rgba(255,255,255,0.3)
css怎么实现背景图片透明而文字不透明_CSS怎么实现背景图片透明而文字不透明效果
http://m.bbyears.com/wangyetexiao/126662.html
推荐访问: