CSS实现背景图片透明和文字不透明效果

港控/mmm° 2022-04-15 02:45 401阅读 0赞

项目中经常会用到背景图上放一些文字介绍，这里介绍两种技术来实现背景图片透明，文字不透明效果，记录一下，方便日后学习。

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);  
\}  
<div class="demo1">背景图半透明，文字不透明<br />方法：背景图+ filter：blur</div>

![Center][]

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);  
\}  
<div class="demo2-bg">  
    <div class="demo2">背景图半透明，文字不透明<br />方法：定位+ background:rgba(255,255,255,0.3)</div>  
</div>

![Center 1][]  
原文：[https://blog.csdn.net/hj7jay/article/details/73480609][https_blog.csdn.net_hj7jay_article_details_73480609]

[Center]: /images/20220415/3f8b0c71239445a4bd2694bd80682300.png
[Center 1]: /images/20220415/1a807f8bbc714dc1b09e32a4ad93a1f3.png
[https_blog.csdn.net_hj7jay_article_details_73480609]: https://blog.csdn.net/hj7jay/article/details/73480609