最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS怎么实现背景图片透明而文字不透明效果
时间：2022-06-25 10:02:23 编辑：袖梨 来源：一聚教程网
摘要:
方法一(毛玻璃效果)：背景图 + 伪类 + 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); }
背景图半透明，文字不透明 | |
相关文章
- 王者荣耀S38赛季有什么更新 12-25
- 王者荣耀S38赛季有什么更新 王者荣耀S38赛季更新内容介绍 12-25
- 世界之外12.25有什么更新 世界之外12月25日更新内容介绍 12-25
- 光遇12.25红石碎片在哪里 光遇12月25日红石碎片位置攻略 12-25
- 奇迹暖暖绚光引途第二天怎么玩 绚光引途day2庆祝之舞搭配攻略 12-25
- 无限暖暖拍照打卡位置在哪里 无限暖暖世界巡游位置全攻略 12-25