排除img opacity

Question

我正在尝试这段代码：

<div id ="crop_image">
    <img class="one" src="http://www.dreamincode.net/forums/uploads/monthly_05_2010/post-380028-12747928967239.jpg.pagespeed.ce.yRppR_j7ae.jpg" />

</div>

#crop_image:not(.one) {
    width: 100%;
    height: 100%;
    background-color: red;
    filter: alpha(opacity=20); /* internet explorer */
    -khtml-opacity: 0.2;      /* khtml, old safari */
    -moz-opacity: 0.2;       /* mozilla, netscape */
    opacity: 0.2;           /* fx, safari, opera */
}

然而，img仍然具有不透明性。有什么问题？

demo

Answer 1

混合一些技巧（inline-block，absolute定位等），你可以得到一个半透明的div来叠加图像。

demo

Answer 2

你可以尝试这个......（修订版）

#crop_image img:not(.one)

Answer 3

我不确定你在那里做什么，但我可以解释为什么它将opactiy设置为.2。

#crop_image:not(.one)表示ID为crop_image但没有one类的元素。如果您查看自己的crop_image，它本身就没有one类，所以这将匹配。 crop_image包含一个.one类的元素，但这不是not所做的。