资源下载 - 从此开始!

下载我_精品源码软件教程资源网

您的位置:首页 > 建站教程 > 网站开发 > css教程 > 正文

CSS怎么实现背景图片透明而文字不透明效果

2017-12-17 07:55 来源:未知 编辑:admin

摘要:

方法一(毛玻璃效果):背景图 + 伪类 + 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

 

CSS怎么实现背景图片透明而文字不透明效果

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

打赏一下,我们会为大家提供更多优质资源!

相关文章,95%的人会看!{有内幕、有真相...}

看过本文的人还看过

关闭

微信扫一扫

站长微信账号