解决css设置背景透明,文字不透明
2015-01-05 19:29
645 查看
[title2]
解决css设置背景透明,文字不透明[/title2]
设置元素的透明度:
-moz-opacity:0.8; /*在Firefox中设置元素透明度
filter: alpha(opacity=80); /*ie使用滤镜设置透明
但是当我们对一个标签设置背景的透明度时,往往我们并不希望该标签上的文字图片也变成半透明了。
例如:
<div><p>不透明</p></div>
div{-moz-opacity:0.3;filter:alpha(opacity=30);background:#000;width:500px;
height:500px;color:#F30; font-size:32px; font-weight:bold; }
可以很明显的看出文字也被半透明的,这是我们不想看到的效果。
以前我曾经是绝对定位的方法解决这个问题,也就是现在的p并不是div的子元素。
<div></div>
<p>不透明</p>
这样div的半透明效果也就不会影响到元素p了。最后在将p定位到需要的位置。
但是很多时候这样的标签并不是很合理,有可能还会多浪费几个标签。
下面的这种方法就可以解决上面的问题了:
div{background:rgba(0,0,0,0.2) none repeat scroll !important; /*实现FF背景透明,文字不透明*/
background:#000; filter:Alpha(opacity=20);/*实现IE背景透明*/
width:500px; height:500px; color:#F30; font-size:32px; font-weight:bold;}
div p{ position:relative;}/*实现IE文字不透明*/
火狐我们直接用rgba颜色就可以解决子标签跟着半透明的问题了,但是ie还不是能很好的支持。
所以我们给不想被透明的标签设置一个定位属性,问题接能解决了。
文字来自:http://blog.163.com/l_lihanyu/blog/static/12003272320123185372127/
相关文章推荐
- 使用css设置图片背景透明,文字不透明
- CSS实现背景透明而背景上的文字不透明完美解决
- CSS 设置背景颜色透明,文字不透明
- CSS设置背景透明,文字不透明。
- css设置背景透明 文字不透明
- CSS设置元素背景透明,其内的文字不透明
- css实现遮罩层(解决透明背景上的文字不透明)
- css——如何让一段文字自动换行,并且左对齐,设置背景透明
- css 设置元素背景为透明
- 兼容所有浏览器的半透明背景且不透明文字的CSS写法
- CSS实现背景透明,Opacity定义了有背景的盒子透明度,但里面的文字也跟着透明
- CSS实现背景透明文字不透明兼容各种浏览器有图有真相
- div+css div不设置高度背景颜色或外边框不能显示的解决方法
- CSS实现背景透明,文字不透明(兼容各种浏览器)
- 解决Chrome谷歌浏览器不支持CSS设置小于12px的文字
- css 透明png背景蓝色解决
- CSS实现背景透明,文字不透明(各浏览器兼容)
- MFC中设置静态文本的字体颜色、背景透明以及解决字体重叠
- 设置桌面图标文字背景透明
- 解决PNG图片在IE6中背景不透明的CSS与JS代码