CSS 背景颜色未按预期运行

Posted 2023-05-08

【中文标题】CSS 背景颜色未按预期运行

【英文标题】：CSS background color not behaving as expected

【发布时间】：2011-11-11 18:10:10

【问题描述】：

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

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

复制问题

首先，在IE 7或IE 8中打开以上链接 点击产品过滤器，然后按促销和社论过滤器 一些图像上会出现白点（这是 IE 中的一个错误，它会导致某些像素在淡入淡出动画后保持透明。如果您看不到它们，请进行更多过滤，它们会出现相当快。

CSS背景颜色问题

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

#isotopegallerybackground:red;

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

.photobackground: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？

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

这是他为我们的网站上线的最后一期，这让我发疯了！ 如果您能提供任何帮助来帮助我解决此问题，我将不胜感激。

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

【问题讨论】：

您可以尝试在 css 中设置“透明”背景。

firian，感谢您的建议，但我不明白您的建议是什么？该图像具有透明像素，它将通过#isotopegallery 的背景颜色显示，但不是 .photo 的背景颜色 - 我尝试设置 .photo imgbackground:transparent; 但这也无济于事（如果那是你的建议)

其实这不是我的意思。尝试设置“背景：透明；”到图像的容器。它修复 IE 的渲染错误的可能性很小，所以值得一试。我想不出还有什么可以帮助你的，祝你好运！

@firian，感谢您的建议。在这个主题上尝试了一些变化 - 但没有一个成功:(

【参考方案1】：

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

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

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

【讨论】：

不要认为这是问题所在。如果我删除图像，我会看到色块。我还尝试按照您的建议将背景颜色直接应用于 img，但这也不起作用。

【参考方案2】：

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

“做了更多的测试。我得出的结论是 IE 将 包含图像的整个元素作为一个“图像”。无论是 可见变平。如果该元素内有一个真黑色像素 图像，而不是元素的像素 将被视为 透明，无论图像背后的实际内容如何。

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

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

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

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

【讨论】：

将使用 IE 的访问者重定向到可以下载 chrome 或 firefox 的页面？

【参考方案3】：

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

IE fade causing white spots on images