css3动态背景图片url

Question

我正在尝试减轻我的 CSS 文件的重量，并有一个问题。这有点难以解释，所以为了简化问题，想象一下这个(虚构的)场景。

假设我拥有一家电器店，销售电视、 radio 和 DVD 播放器。此外，我只卖松下、索尼、三星和 NEC 的产品。

四个制造商中的每一个都有自己的图像，三个电子产品中的每一个都显示了具有不同裁剪、宽高比等的图像。(重点是，我不能在不同的产品上使用相同的图像，只是重新缩放。它们是单独的图像)

到目前为止，我的产品网站的 CSS 看起来像这样

/* TVs */
a.tv.panasonic { background:url('/images/television/panasonic.jpg'); }
a.tv.sony      { background:url('/images/television/sony.jpg'); }
a.tv.samsung   { background:url('/images/television/samsung.jpg'); }
a.tv.nec       { background:url('/images/television/nec.jpg'); }

/* Radios */
a.radio.panasonic { background:url('/images/radio/panasonic.jpg');}
a.radio.sony      { background:url('/images/radio/sony.jpg');}
a.radio.samsung   { background:url('/images/radio/samsung.jpg');}
a.radio.nec       { background:url('/images/radio/nec.jpg');}

/* DVD Players */
a.dvd.panasonic { background:url('/images/dvd/panasonic.jpg');}
a.dvd.sony      { background:url('/images/dvd/sony.jpg');}
a.dvd.samsung   { background:url('/images/dvd/samsung.jpg');}
a.dvd.nec       { background:url('/images/dvd/nec.jpg');}

这只是十二种款式，没什么大不了的，但实际上，我们有大约 12 种不同的“产品”和大约 80 家不同的“制造商”，这真的很难管理，尤其是考虑到“制造商”形象会经常改变。此外，我没有可供我使用的服务器端语言。

因此，我的问题是这样的。是否可以合并来自两个规则的图像 URL？例如，我可以执行以下操作吗:

a.tv    { background:url('/images/television'); }
a.radio { background:url('/images/radio'); }
a.dvd   { background:url('/images/dvd); }

a.panasonic { background:url( background + '/panasonic.jpg'); }
a.sony      { background:url( background + '/sony.jpg'); }
a.samsung   { background:url( background + '/samsung.jpg'); }
a.nec       { background:url( background + '/nec.jpg'); }

这样，每次我们得到一个新的“制造商/产品”或制造商的图像发生变化时，我只需要编辑/修改一行

谢谢

Answer 1

你可以用 jQuery 控制它

HTML

<a href="#" data-type="radio" data-brand="panasonic" class="brand-image"></a>

jQuery

$('.brand-image').each(function(){
    var type = $(this).attr('data-type');
    var brand = $(this).attr('data-brand');

    $(this).css('background-image', 'url(images/' + type + '/' + brand + '.jpg)');
});

在您想要更改的每个 anchor 上，您可以添加一个类来指示 jQuery 在该 anchor 上运行该函数。在这些 anchor 中，您可以使用数据类型和数据品牌指定该图像的类型和品牌。当该函数运行时，它会根据您提供的数据将背景图像应用于该 anchor 。