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

Posted 2023-04-12

参考技术A 用两个层重叠，一个文字，一个图片，其中一个层设置好position
<div style="width:200px; height:200px; overflow:hidden;">
<div style=" background:#000; width:200px; height:200px; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;">
图图图图图</div>
<div style="position: relative; margin-top:-200px; color:#FFF;">
字</div>
</div>

要点：
overflow:hidden;
position: relative;
margin-top:-200px;

注意各容器的高宽本回答被提问者和网友采纳 参考技术B 写2个层 一个用来作为背景设置为透明，一个是内容模块，设置z-idnex大于背景层 参考技术C

opacity是整个盒子中 所有 内容都随着透明的，

要想只背景设置透明度，可以用background:rgba(1.100.255,0.2)

设置div背景透明的方法?

设置div背景透明的方法?

参考技术A opacity和rgba都是设置透明度的，区别在于opacity是整体的透明度，标签本身及标签内容还有标签的子元素都会受到影响。rgba仅仅是改变元素的添加背景色，内容及子元素不受影响。
<div class="test tstop">233</div>
<div class="test tstrgba">666</div>
.test width: 200px; height: 200px
.tstop background: red; opacity: 0.6
.tstrgba background: rgba(255, 0, 0, 0.6)
可以实际体验一下。 参考技术B 说的不明确，背景透明，是颜色，还是背景图片，还是整个div
背景颜色：可以使用：rgba(0,0,0,0.5)，最后一个值是透明度
div透明度：opacity(.5) 参考技术C opacity：0，这样可以设置背景的透明度