CSS 问题：将类应用于滑块图像标签以更改背景颜色

【问题标题】：CSS issue: Applying a class to a slider image tag to change the background colorCSS 问题：将类应用于滑块图像标签以更改背景颜色
【发布时间】：2012-11-16 08:48:42
【问题描述】：

我和一位同事被 CSS 问题困扰了几个小时，我们似乎不知道为什么会发生这种情况。

如果您查看http://www.currysauto.com/services/brakes/brake-job-rear-disc.aspx，缩略图图像会根据名为 .ndcustomcolorclass 的 css 规则拾取，该规则会将存在 alpha 蓝色的图像变为蓝色。但是，将相同的规则应用于大图像，它似乎不起作用。但是，更具体会更改图像蓝色（假设您要使用 .nivoSlider img，这会使图像变为蓝色）。我的问题是，为什么大图像没有像缩略图那样根据规则改变背景颜色。

谢谢。

【问题讨论】：

如果我向#slider img 添加背景颜色，似乎可以正常工作，大图像会获得颜色。我想我误解了你的问题。

标签： css image background tags

【解决方案1】：

好吧，滑块插件似乎在“玩”你的视觉技巧。 a 元素中的图像不是可见的（你可以分辨，因为它们有visibility: hidden）。该插件使用另一个img 标记作为主图像，并且稍微向下一点（<img class="nivo-main-image">）。这就是您需要应用 ndcustomcolorclass 类的图像。问题是图像是动态生成的，所以你可能不能一开始就在它上面添加一个类。我可以看到至少 2 个选项：

通过jquery添加类：

$(document).ready(function() {
    $("img.nivo-main-image").addClass("ndcustomcolorclass");
});

直接破解 CSS：

.nivo-main-image {background: none repeat scroll 0 0 #003D7D;}

【讨论】：