Question

在主包装元素上我有一些不透明度，但我无法在内部元素上清除该样式？

这是示例

<div class="wrapper">

<div class="inner">

</div>
</div>

这是CSS

 .wrapper{
    width:400px;
    height:500px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";       /* IE 8 */
    filter: alpha(opacity=60);  /* IE 5-7 */
    -moz-opacity: 0.6;          /* Netscape */
    -khtml-opacity: 0.6;        /* Safari 1.x */
    opacity: 0.6;
    background-color:red;
    }

 .inner{
    width:200px;
    height:300px;
    background-color:blue;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";       /* IE 8 */
    filter: alpha(opacity=100);  /* IE 5-7 */
    -moz-opacity: 1.0;          /* Netscape */
    -khtml-opacity: 1.0;        /* Safari 1.x */
    opacity: 1.0;
    }

即便重要也无济于事？这是工作小提琴 http://jsfiddle.net/Pq4LS/

Answer 1

您不能强迫孩子的不透明度高于其父级。

在这种情况下，您可以设置部分透明的background-color或background-image以适应。

http://jsfiddle.net/Pq4LS/2/

 .wrapper{
    width:400px;
    height:500px;
    background-color: rgb(255, 0, 0); /* Oops, don't forget to set a fallback colour for older browsers */
    background-color: rgba(255, 0, 0, 0.6);
    }

 .inner{
    width:200px;
    height:300px;
    background-color:blue;
    }

Answer 2

这是什么意思清楚？请改进你的问题

我改变了它的工作不透明度

 .wrapper{
    width:400px;
    height:500px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE 8 */
    filter: alpha(opacity=100);  /* IE 5-7 */
    -moz-opacity: 1;          /* Netscape */
    -khtml-opacity: 1;        /* Safari 1.x */
    opacity: 1;
    background-color:red;
    }

 .inner{
    width:200px;
    height:300px;
    background-color:blue;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";       /* IE 8 */
    filter: alpha(opacity=60);  /* IE 5-7 */
    -moz-opacity: 0.6;          /* Netscape */
    -khtml-opacity: 0.6;        /* Safari 1.x */
    opacity: 0.6;
    }

内部元素的不透明度CSS？

2 个答案: