Question

html css里设置div为50%透明，为div里面的img添加opacity：1；不透明，但显示的结果img也是透明的，

Answer 1

你外面的DIV都透明了。那么他包含的所有元素都是透明的。你可以这么做
<div style="position:relative">
<div style="opactiy:.5;position:absulot;left:0;top:0;width:100%;height:100;">这是你要透明的DIV</div>

<img src="" style="position:absulot;left:0;top:0;width:100%;height:100;"> /><!--这个是不透明的-->

</div>
当然这种方式一点都不理想
最好的方式当然是设置

外面这个DIV 背景“色”为透明。而不是他本身透明rgba(134, 62, 62, 0.39)
如果是图片就是第一种方式。

Answer 2

透明属性是强制继承的，也就是说透明层内的子元素也必然是透明的。

解决方法：把div和img分别放在平等关系的两个层中（也就是说img不再是被div包含的），然后div设为透明，再把img通过绝对定位覆盖在div上。

还有一种办法就是用透明色来代替透明属性，比如：

<div style="background-color:rgba(255,128,128,0.5)"><img src="..."/></div>

不过如果div中是背景图片而不是单纯的填充色，那这种方法就无效了。

Answer 3

如果要实现透明边框，子元素不透明，那么就要用这个组合：{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3f000000',endColorstr='#3f000000');background-color:rgba(255, 255, 255, 0.3)}，但要注意这两个属性中的颜色，透明度一定要一致，这个兼容性最高，效果也最好。
startColorStr:可选项。字符串(String)。设置或检索色彩渐变的开始颜色和透明度。
其格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 - FF 。 RR 指定红色值， GG 指定绿色值， BB 指定蓝色值，参阅 #RRGGBB 颜色单位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范围的值将被恢复为默认值。
取值范围为 #FF000000 - #FFFFFFFF 。默认值为 #FF0000FF 。不透明蓝色。
EndColorStr:可选项。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。参阅 startColorStr 属性。默认值为 #FF000000 。不透明黑色。

Answer 4

img，继承了opacity属性，这个解决方法就是position把img定位在div上。图片不能放在opacity属性的div中。不考虑老浏览器的话，改用background:rgba();实现div透明就不会出现继承的问题。