Question

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

相关网页：http://www.preview.imageworkshop.com/portfolio/

复制问题

首先，在 IE 7 或 IE 8
点击PRODUCT过滤器，然后按PROMO＆amp; EDITORIAL过滤器
白点会出现在某些图像上（这是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设置了color属性，但是没有通过透明像素显示？

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

注意：有信息表明改变photoshop中图像的黑点将解决此问题。我们尝试过这种方法，并发现它不起作用。

Answer 1

你是否漂浮.photo的内部元素而不清除它们？这样可以防止背景颜色覆盖相关元素的高度。

如果是这种情况，将<br style='clear: both;' />之类的内容添加到.photo div应该可以解决问题。

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

Answer 2

同位素的创造者一直在帮我看看这个问题，并添加了以下评论：

“做了一些更多测试。我得出结论IE对待了   整个元素，包含图像，作为一个“图像”。无论是   可见变得扁平。如果该元素中包含真黑像素   一个图像，而不是该元素的像素将被视为   透明，无论图像背后是什么。

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

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

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

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

Answer 3

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

IE fade causing white spots on images

CSS背景颜色不符合预期

3 个答案: