CSS 背景颜色未按预期表现

Question

我不明白为什么这里没有按预期应用背景颜色。这可能是我对CSS中元素之间的关系缺乏了解？

有问题的页面： http://www.preview.imageworkshop.com/portfolio/

< strong>复制问题

1. 首先，在 IE 7 或 IE 8 中打开上述链接
2. ，单击“产品”过滤器，然后按“促销和促销”按钮。编辑过滤器
3. 白点会出现在一些图像上（这是 IE 中的一个错误，导致一些像素在淡入淡出动画后保持透明。如果您没有看到它们，请多做一些过滤，它们会显示得相当好）

CSS 背景颜色问题

有效方法： 如果我将图库背景的背景颜色设置为红色，则该红色会通过图像上的透明点显示。 （这里的推论是，黑色背景颜色隐藏了“白点”错误）。

#isotopegallery{background:red;}

什么不起作用： 显然，我不想将图库背景颜色设置为白色以外的任何颜色。 我想要做的是设置包含图像的 DIV 的背景颜色，例如：

.photo{background:red;} 

但是，当我这样做时，红色背景颜色不会通过透明像素显示出来？

元素结构的简化概述如下

<div id="isotopegallery" class="photos">
    <div id="ngg-gallery-18-71">
        <div class="photo"> <p><a>  <img />  </a></p>   </div>
        <div class="photo"> <p><a>  <img />  </a></p>   </div>
        <div class="photo"> <p><a>  <img />  </a></p>   </div>
        <div class="photo"> <p><a>  <img />  </a></p>   </div>
    </div>
</div>

帮助！

我不明白为什么这个背景颜色适用于#isotopegallery父DIV，但不适用于.photo DIV？

当我查看 firebug 时，为 .photo div 设置了颜色属性，但没有通过透明像素显示？

这是他在我们网站上发布的最后一期，这让我发疯！ 我非常感谢您为我解决此问题提供的任何帮助。

注意：有信息表明，在 Photoshop 中更改图像的黑点可以解决此问题。我们尝试过这个方法，发现行不通。

Answer 1

您是否浮动 .photo 的内部元素而不清除它们？这将防止背景颜色覆盖相关元素的高度。

如果是这种情况，请附加类似
到 .photo div 应该可以解决问题。

同样，您始终可以尝试将背景颜色应用于 img 元素本身：.photo img { background-color: red;}

Answer 2

isotope的创建者一直在帮我研究这个问题，并添加了以下评论：

“做了更多测试。我得出的结论是 IE 对待
包含图像的整个元素作为一个“图像”。不管是什么
可见变得扁平。如果该元素内有一个纯黑色像素
一个图像，该元素的像素将被视为
透明，无论图像后面实际是什么。

看看：http://support.metafizzy.co /2011/09-06-ie-trans.html

您会看到弹出几个透明像素，即使
每个项目的背景都是明显的红色（项目有填充，背景
是红色的）。然后我动态地将它们的颜色更改为蓝色，并将像素
仍然是透明的。

这意味着唯一的纯 CSS 解决方案是设置容器
背景为黑色”

不知道从这里到哪里去。我们尝试过移动黑点（因为这应该是由真正的黑色像素引起的），但发现这是一个不成功的方法。

Answer 3

我找到了这个问题的解决方案。我已经发布了针对此主题的完整详细信息（下面的链接），其中更详细地描述了该问题。

IE 淡入淡出导致图像上出现白点