CSS 验证警告 : Same colors for color and background-color in two contexts

Question

当我通过 http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.gamefriction.com%2FCoded&profile=css21&usermedium=all&warning=1&lang=en 进行 CSS 验证检查时，我收到了大量警告，如下所示。

> 513       Same colors for color and
> background-color in two contexts
> #blue_module and #red_module_top 513      Same colors for color and
> background-color in two contexts
> .content ul li and #red_module_top 513
>       Same colors for color and
> background-color in two contexts
> #footer_container and #red_module_top 513         Same colors for color and
> background-color in two contexts
> ul.tabs li a.active and
> #red_module_top 513       Same colors for color and background-color in two
> contexts #content_960 and
> #red_module_top 513       Same colors for color and background-color in two
> contexts #content_main and
> #red_module_top 513       Same colors for color and background-color in two
> contexts .content and #red_module_top
> 513       Same colors for color and
> background-color in two contexts
> #league_module select option and #red_module_top 513      Same colors for color and background-color in two
> contexts #red_module and
> #red_module_top

有什么办法解决这个问题吗？

CSS 文件:gamefriction.com/Coded/css/style.css

Answer 1

它的意思是您在某些上下文中具有相同的背景色和前景色。来自您的 CSS 的示例(为清楚起见省略了一些声明):

#red_module_top {
  background: url(http://www.gamefriction.com/Coded/images/red_content_top.jpg) no-repeat;
  color: #fff;
}

注意您如何设置颜色:#fff。这意味着您的前景颜色是白色。但是你的背景颜色没有设置。您确实设置了背景图像，但如果由于某种原因该图像不可用，那么背景也将是白色的(因为您的 body 标记未定义背景颜色并且验证器假定它是白色)，从而使文本不可见。

您可以只向背景线添加一种颜色来解决这个问题。例如:

background: #ff0000 url(http://www.gamefriction.com/Coded/images/red_content_top.jpg) no-repeat;

现在发生的是验证器将看到背景与前景不同并且不会提示。