您的位置首页快问快答

div+css如何实现背景图半透明文字内容不透明?

div+css如何实现背景图半透明文字内容不透明?

的有关信息介绍如下:

div+css如何实现背景图半透明文字内容不透明?

我们这里主要是为了好对比,采用了两个数据的div+css显示情况。其中div 和css样式相似

在浏览器下进行代码html下面的查看,具体对比图显示,bg和bg1中间有一个10px的距离,以便更好的对比。

div中有一个opacity,可以去处理一下css的透明度,在第一个bg添加filter:alpha(opacity=30);opacity:0.3;,我们可以看到不只是图片背景有透明,文字相应的也做了透明处理,如下面对比图

那么,我们现在要解决的问题就是,怎么让文字不透明而背景色透明,或者说背景图片透明。第一种,可以直接对图片进行透明度处理,用ps软件,对图片透明度进行处理。

用图片进行透明度处理之后,需要在css里修改图片的选择一个选择为bg2,一个背景图选择bg1。

此时的html显示情况,可以很清楚的看到图片的颜色变浅了,而文字的颜色却没有变化。

对于如果是颜色背景的话,可以直接用css样式进行透明的处理的background:rgba(0,0,0,0.2) none repeat scroll !important;

在背景色里,我们是以黑色为背景,以红色为字体样式,在对比的html里,可以看到背景色发生了变化,而文字颜色没有变