您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

用CSS实现背景图片透明而文字不透明的两种方法

2024/3/2 13:21:02发布19次查看
这篇文章主要介绍了css实现背景图片透明而文字不透明效果的两种方法,需要的朋友可以参考下
摘要:
方法一(毛玻璃效果):背景图 + 伪类 + 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); }
<p class="demo1">背景图半透明,文字不透明<br />方法:背景图+ filter:blur</p>
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); } <p class="demo2-bg"> <p class="demo2">背景图半透明,文字不透明<br />方法:定位+ background:rgba(255,255,255,0.3)</p> </p>
以上就是用css实现背景图片透明而文字不透明的两种方法的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product