最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS怎么实现背景图片透明而文字不透明效果
时间：2017-04-28 00:00:00 编辑：简简单单 来源：转载
摘要:
方法一(毛玻璃效果)：背景图 + 伪类 + 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(/background_img/1.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(/background_img/1.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); }
背景图半透明，文字不透明 | |
相关文章
- css如何实现文字在背景图片之上 css实现文字在背景图片之上代码10-23
- css中文字图片背景图居中的方法汇总09-08
- CSS实现文字半透明显示在图片上方法08-30
- CSS文字环绕图片的例子02-18
- css中vertical-align 图片文字水平对齐分析02-16
- css文字与图片垂直对齐(vertical-align)01-16
网站留言