CSS如何实现背景图片透明而文字不透明效果

　　介绍

这篇文章给大家分享的是有关CSS如何实现背景图片透明而文字不透明效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

<>强摘要:

方法一(毛玻璃效果):背景图+伪类+争吵:模糊(3 px)

方法二(半透明效果):背景图+定位+背景:rgba (255255255, 0.3)

CSS实现背景图片透明、文字不透明效果的两种方法

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

<强> 1。毛玻璃效果:

背景图+伪类+争吵:模糊(3 px)

.demo1 { 　　,,,宽度:,500 px; 　　,,,身高:,300 px; 　　,,,行高:,50 px; 　　,,,text-align:,中心; 　　} 　　.demo1:{之前 　　,,,背景:,url (http://csssecrets.io/images/tiger.jpg),不再重演; 　　,,,background-size:,封面; 　　,,,宽度:,500 px; 　　,,,身高:,300 px; 　　内容,,,:,“,“; 　　,,,位置:,绝对; 　　,,,:,0; 　　,,,左:,0; 　　,,,z - index:, 1;/* 1,可以当背景*/,,,-webkit-filter:,模糊(3 px); 　　,,,过滤器:,模糊(3 px); 　　} & lt; div 类=癲emo1"在背景图半透明、文字不透明& lt; br /祝辞方法:背景图+,过滤器:blur