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种不同的产品和＃34;以及大约80个不同的制造商＆＃34;，这真的很难管理，特别是考虑到制造商＆＃34;图像会经常变化。此外，我没有掌握服务器端语言。

因此，我的问题是这个。是否可以从两个规则合并图像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'); }

这样，每当我们得到一个新的＆＃34;制造商/产品＆＃34;或者制造商的图像发生变化，我只需要编辑/修改一行

由于

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

Answer 2

你需要像SASS BUT这样的东西，如果你没有＆＃34; kb＆＃34;问题，你可以使用智能背景。

IDEA：每个演讲者都有自己的背景。这个图像突出了这个显示器的每个产品的所有背景。

每个产品都有一个类。每个类都有一个背景位置属性设置x pos和y pos of＆＃34; inner - image＆＃34;。

所以基本上你有：

.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>

这是一个有一个独特的背景图像填充活动状态的技巧，如＆＃34; hover＆＃34;和＃34;焦点＆＃34;每次都很有效，因为它加载了一个图像，因此当您更改按钮客户端的状态时，只需更改图像的起始坐标而不加载另一个图像。但是，如果背景图像很重且很大，那么加载一个兆字节jpg就有风险！

Answer 3

我不知道有任何方法可以纯粹使用CSS动态地将值附加到样式代码。

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

css3动态背景图片网址

3 个答案: