css3动态背景图片url

我试图减轻我的CSS文件的重量，并有一个问题。这有点难以解释，所以为了简化问题，想象一下这个（虚构的）场景。css3动态背景图片url

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

这样，每次我们得到了一个新的“制造商/产品”或生产厂家改变形象的时候，我只需要编辑/修改一行

感谢

来源

2014-03-28 Typhoon101

我知道你没有服务器端的功能，但你可以使用Javascript/jQuery？这将是非常简单的与jQuery –

为什么不jQuery？ – theMarceloR

只能使用CSS预处理器，如SASS。但是，如果你有这么多选项，请帮忙，不要为样式表添加规则，使用内联样式添加背景图片，这将严重减轻样式表。即使预处理器只会使语法更容易管理，.css样式表的最终权重也不例外。 – Adam

你需要像SASS，但如果你没有“KB”的问题，你可以使用智能背景。

想法：每个制造者都有自己的背景。这张图片支持这个制表者的每个产品的所有背景。

每个产品都有一个类。每个班级都有一个“内部图像”的背景位置属性设置x pos和y pos。

所以基本上你必须：

.panasonic { 
    background-image: url('myurl_panasonic'); 
    background-position: 0px 0px; 
} 

.sony{ 
    background-image: url('myurl_sony'); 
    background-position: 0px 0px; 
} 

.tv { 
    background-position: 0px 120px !important; 
} 

.dvd { 
    background-position: 0px -500px !important; 
} 

.mpplayer { 
    background-position: 50px 720px !important; 
}

和一个div将是这样的：

<div class="sony dvd"></div>

这是招有一个独特的背景图像，填补像“的工作状态悬停“和”焦点“，每次都能很好地工作，因为加载了单个图像，所以当您更改按钮客户端的状态时，只需更改图像的起始坐标而不加载其他图像。但是，如果背景图像很重且很大，则会冒着加载兆字节jpg的风险！

来源

2014-03-28 16:32:20 MrPk

我喜欢这个想法。易于维护，纯CSS。谢谢 – Typhoon101

你可以使用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来运行锚功能的锚。在这些锚中，使用数据类型和数据品牌，您可以指定该图像的类型和品牌。当函数运行时，它会根据您提供的数据将背景图像应用到该锚点。

来源

2014-03-28 16:17:54 robbclarke

我不知道任何方法动态地将值添加到样式代码纯粹与CSS。

所以，我的建议是使用jQuery，来看看它的一些功能： http://api.jquery.com/css/ http://api.jquery.com/addclass/

来源

2014-03-28 16:18:03 theMarceloR

css3动态背景图片url

回答

相关问题