怎么让div透明,上面的文字不透明?

html-css013

怎么让div透明,上面的文字不透明?,第1张

设置div透明度的时候可能会遇到这样一个问题,那就是对象中的文字也被产生了透明现象,也不能说事缺陷,也可能有时候需要这样的效果。这里就介绍一下如何将对象设置为透明效果,但是文字不透。

rgba(),css3里才有的,所有只有支持css3的浏览器才支持,a是指透明度,取值0.0-1。

如果用opacity就感觉文字也透明了。影响外观,阅读。

还有一种兼容的方法,主要兼容不支持使用rgba()格式值的浏览器。

DIV本身就是块级元素,不需要设置。

如果想要行内元素变成块级元素:display:block

如果想要块级元素变成行内元素:dispaly:inline。

不透明度会作用于整个元素以及它所有的子元素,子元素不透明度=父元素不透明度乘以子元素本身不透明度,而opacity的范围是0~1,所以就算把里面的div的opacity设为1也没有用,子元素是没办法获得大于父元素的不透明度值的。如果是万不得已视觉排版效果上的需要,可以分别设置两个兄弟元素的不透明度,然后用position的方法将一个放在另一个的上方。

就是层叠加,

...

<div>放内容</div>

<div>用作透明背景</div>

...

然后使用定位技术把用作透明背景的div定位到内容层底下,然后设置该层透明度即可,透明层的圆角可使用css3进行优化,支持css3的浏览器显示圆角,否则显示直角,这都是facebook,renren的做法