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);

}

背景图半透明，文字不透明
方法：背景图+ 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怎么实现背景图片透明而文字不透明效果

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程