html – 无法控制div内图像的不透明度

概述我想div中的图像是不透明的,而div是透明的.我尝试设置图像和div的不透明度,但它不起作用. jsFiddle链接：http://jsfiddle.net/2BNEF/10/ 我希望图像不透明,文本透明可见. <div id="targetframe"> It is a long established fact that a reader will be distracted by 我想div中的图像是不透明的,而div是透明的.我尝试设置图像和div的不透明度,但它不起作用.

Jsfiddle链接：http://jsfiddle.net/2BNEF/10/

我希望图像不透明,文本透明可见.

<div ID="targetframe">    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters,as opposed to using 'Content here,content here',making it look like readable English. Many desktop publishing packages and web page editors Now use Lorem Ipsum as their default model text,and a search for 'lorem ipsum' will uncover many web sites still in their infancy. VarIoUs versions have evolved over the years,sometimes    <div ID="target">        out. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters,making it look like readable English. Many desktop publishing packages and web page editors Now use Lorem Ipsum as their defaul        <img  src="http://www4.picturepush.com/photo/a/1365552/480/trucks-photgraphy/asdf-%2858%29.jpg?v0"/>    </div></div>#targetframe {    background: none repeat scroll 0 0 black;    border: 2px inset grey;    Font-family: Verdana,sans-serif;    left: 0;    margin: 0;    overflow: hIDden;    @R_301_5095@: 0;    position: absolute;    top: 0;    opacity: 0.5;}#target {    background: none repeat scroll 0 0 transparent;    height: 100%;    left: 0;    position: relative;    top: 0;    wIDth: 100%;    z-index: 0;}.myimage {    opacity: 1;}

解决方法 如果在元素上设置不透明度,那么该元素的所有后代(子项,所有子项的子项……)都会继承它,并且您无法阻止它.

在这种情况下,您可以使用RGBa背景(rgba(0,.5)而不是黑色 – DEMO)作为div. RGBa具有出色的支持 – 唯一不支持它的浏览器是ie8及更早版本,对于那些可以使用滤镜渐变的浏览器.

总结

以上是内存溢出为你收集整理的html – 无法控制div内图像的不透明度全部内容，希望文章能够帮你解决html – 无法控制div内图像的不透明度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。