div+css如何实现背景图半透明文字内容不透明?
在进行div+css进行页面处理的时候会出现很多问题,特别是在使用背景色的时候,如果图片背景颜色太深不适合做背景。本文从对背景图片进行半透明处理,讲一下css的作用。
操作方法
- 01
我们这里主要是为了好对比,采用了两个数据,如下图的div+css显示情况。其中div 和css样式相似,如下图
- 02
在浏览器下进行代码html下面的查看,具体对比图如下图显示,bg和bg1中间有一个10px的距离,以便更好的对比。
- 03
div中有一个opacity,可以去处理一下css的透明度,在第一个bg添加filter:alpha(opacity=30);opacity:0.3;,我们可以看到不只是图片背景有透明,文字相应的也做了透明处理,如下面对比图
- 04
那么,我们现在要解决的问题就是,怎么让文字不透明而背景色透明,或者说背景图片透明。第一种,可以直接对图片进行透明度处理,用ps软件,如下图,对图片透明度进行处理。
- 05
用图片进行透明度处理之后,需要在css里修改图片的选择,如下图一个选择为bg2,一个背景图选择bg1。
- 06
此时的html显示情况如下图,可以很清楚的看到图片的颜色变浅了,而文字的颜色却没有变化。
- 07
对于如果是颜色背景的话,可以直接用css样式进行透明的处理,如下图的background:rgba(0,0,0,0.2) none repeat scroll !important;
- 08
在背景色里,我们是以黑色为背景,以红色为字体样式,在对比的html里,可以看到背景色发生了变化,而文字颜色没有变。如下图
赞 (0)