最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS怎么实现背景图片透明而文字不透明效果
时间:2017-04-28 编辑:简简单单 来源:一聚教程网
摘要:
方法一(毛玻璃效果):背景图 + 伪类 + 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); } 背景图半透明,文字不透明
|
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); }
背景图半透明,文字不透明 |
相关文章
- CSS文字环绕图片的例子 02-18
- css中vertical-align 图片文字水平对齐分析 02-16
- css文字环绕图片实现方法 11-29
- css 图片加文字排列方式 09-15
- CSS 鼠标点击拖拽效果代码展示 10-31
- CSS使用SVG实现动态分布的圆环发散路径动画教程 10-31