css3动态背景图片网址

Question

我试图减轻我的CSS文件的重量,并有一个问题.这有点难以解释,因此在尝试简化问题时,想象一下这个(虚构的)场景.

想象一下,我拥有一家电器商店,并出售电视,收音机和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)');
});

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