如何分配混合类和 id 的 CSS 背景图像属性

Question

我想知道你们中是否有人有任何技巧可以做到这一点，或者我是否完全想多了。

我使用了许多图像，显示这些图像的最有效（也是最简单）的方法是使用 CSS background:url("link"); 属性，其中link 是指向我的图像文件的正确链接。这也可以防止我的 html 文件混乱。

问题是上面的代码存在于 50 多个不同的 id 中，每个都指向不同的图像，我需要调整图像的大小，但是我真的不想把下面的代码放在每个 id 下.

background-size:180px 239px;
background-repeat:no-repeat;

---

简单地说： 我的 CSS 看起来像这样......

我的“ID”

#image1
{
    background:url("../Images/image1.png");
}

#image2
{
    background:url("../Images/image2.png");
}

#image3
{
    background:url("../Images/image3.png");
}

我的班级

.myClass
{
    width:180px;
    height:239px;
    background-size:180px 239px;
    background-repeat:no-repeat;
}

请注意，通过输入此代码，一切看起来都很正常，但是如果您更改 background-size 中的值（比如 100px 239px，您会注意到我遇到的问题）

---

html 中的典型用法如下：

<div id="image1" class="myClass"></div>

---

这个问题的 jsfiddle 可以在这里找到：jsfiddle

预期的结果显示在小提琴中的文字下方。

我将如何进行编码以使其保持干净？

我想指出，我正在尝试将我的 CSS 和 JS 分开。我正在寻找一种纯粹的 CSS 方式来编码。我需要从一个位置控制所有 id 的背景属性。

非常感谢您对此的任何帮助，谢谢。

Answer 1

将背景更改为背景图像，它将起作用:)

#image1
{
    background-image:url("http://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Bolognese_Image.jpg/180px-Bolognese_Image.jpg");
}

#image2
{
    background-image:url("http://www.phy.duke.edu/~kolena/Recommended.gif");
}

.myClass
{
    width:180px;
    height:239px;
    background-size:100px 239px;
    background-repeat:no-repeat;
    border:2px solid red;
}

/*------------------------------------*/


#thisIsWhatIWantItToLookLike
{
    background-image:url("http://www.senoja.nl/images/mainecoons/galleryxamina/xamina1.jpg");
    background-size:100px 239px;
    background-repeat:no-repeat;
}

.mySadClass
{
    width:180px;
    height:239px;
    border:2px solid blue;
}

<div id="image1" class="myClass"></div>
<div id="image2" class="myClass"></div>
<p>This above images should show up like the one below does, squished</p>
<div id="thisIsWhatIWantItToLookLike" class="mySadClass"></div>

Answer 2

background-size: 100px 239px !important;
background-repeat: no-repeat !Important;

将这两个属性添加到您的类中

DEMO