我用css 中的opacity 设置元素背景的透明度 后发现该元素的内容透明度也跟着变化 怎样取消该内容的透明度

html-css025

我用css 中的opacity 设置元素背景的透明度 后发现该元素的内容透明度也跟着变化 怎样取消该内容的透明度,第1张

用两个层重叠，一个文字，一个图片，其中一个层设置好position

<div style="width:200pxheight:200pxoverflow:hidden">

<div style=" background:#000width:200pxheight:200pxfilter:alpha(opacity=50)-moz-opacity:0.5-khtml-opacity: 0.5opacity: 0.5">

图图图图图</div>

<div style="position: relativemargin-top:-200pxcolor:#FFF">

字</div>

</div>

要点：

overflow:hidden

position: relative

margin-top:-200px

注意各容器的高宽

对于不同的浏览器需要区别对待

IE系列浏览器

外层DIV，设置透明，内容元素设置元素定位为相对定位或者绝对定位

如

<div style="filter:alpha(opacity=70)">

<div style="position:relative">text</div>

</div>

非IE浏览器

外层div，不要设置透明，使用background:rgba(120,120,120,0.7)实现效果