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(http://*csssec*re*ts.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); } 背景图半透明，文字不透明
| |
2.半透明效果：
背景图 + 定位 + background:rgba(255,255,255,0.3)
| 代码如下 | 复制代码 |
|
.demo2-bg{ background:url(http://*csssec*re*ts.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); }
背景图半透明，文字不透明 | |
