删除具有不透明度的容器内的图像不透明度

Question

当图像放在具有opacity: 0.6;的容器中时，是否可以删除图像不透明度？

我需要包含的图像在具有不透明度的背景中没有不透明度。

Answer 1

不透明度是继承的，不能被覆盖，但是，有几种方法可以实现类似的效果：

1. 您可以使用不透明度以外的其他内容，例如rgba。这里背景是红色的，不透明度设置为0.6，声明如下：background-color: rgba(255,0,0,0.6); Support is IE9+ (and all the proper browsers) - 所以除非你需要支持旧的IE，否则你会没事的
2. 您可以分隔元素，使内部元素不是父元素的子元素，并使用负边距或位置值将内部元素拖动到位。这很有用，背景本身就是一个图像，或者比平面颜色更复杂。

This jsfiddle演示了两种解决方案。您可以看到没有必要为示例1设置任何不透明度，因为rgba声明涵盖了这一点，而第二个.image不在.background中，因此不透明度没有效果。

注意：使用负值定位的示例使用left：-75px作为浮动声明使所有元素出现在有空格的行上，因此要叠加的元素出现在它叠加的元素的左侧。您可能希望在实际示例中应用更多约束 - 因为您希望保证拖动的元素在拖动之前出现在您希望的位置。

最后，如果父元素的背景是图像，您可以在PhotoShop或类似的图像编辑包中处理它，或者如果是用户生成的图像，则可以在服务器端处理它，以便将不透明度直接应用于图像。 / p>