如何用css将div的背景图片修改不透明度并且不影响嵌套的img的不透明度

html-css0420

如何用css将div的背景图片修改不透明度并且不影响嵌套的img的不透明度,第1张

可以把带有 不透明度的div 跟 嵌套img 的div 分开来，也就是 把两个效果分开，让 背景图片的div 跟 img 所在的div在相同的位置， 但设置 不同的 z-index 值，让背景图片的div在 img div 的下层。效果上可以达到你想要的，但 在你说的基础上 多一个带有背景 div 。这样 透明度就不会影响，因为 这时 img不是 带透明度div的子元素。

html-css 中让一个DIV的背景色是透明的，但它的内容（文字图片之类的）不是透明的，这个的话，是可以通过设置2个div来实现的，第一个包裹着第二个div然后在设置相同的div宽高，在将第一个的opacity为0；代码如下：

<div id='div1'>

<div id='div2'>

<p>我是测试文字</p>

</div>

</div>

<style>

div{

widht:220px

height:300px

}

#div1{

background:#fff

opacity:0

z-index:10

}

#div2{

z-index:11

}

</style>

css代码

<style>

.div{

position:absolute

left:50

top:70

width:150

}

.img{

position:absolute

top:20

left:40

filter:alpha(opacity=80)

}

</style>

页面代码

<div>

<p>

<font class="textShadow">选择公文

</font>

<font class="textsd">leaf

</font>

</p>

<p style="font-size:48font-weight:boldcolor:red">

Beautiful </p>

<p><img src="web/7.jpg" style="position:absolute

top:20

left:40

filter:alpha(opacity=0,finishopacity=100,

style=1,startx=0,starty=85,finishx=150,finishy=85)" ></p>

</div>

效果图：