Question

我想知道你是否有任何伎俩可以实现这一目标，或者我是否完全过分思考这一点。

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

问题是上面的代码是在50多个不同的ID中找到的，每个ID指向不同的图像，我需要调整图像的大小，但是我真的不想在每个id下面放置以下代码

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

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

我的＆＃34; ID ＆＃34; s

#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

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

我将如何对其进行编码以使其保持清洁？

我想要注意的是，我正在努力保持我的CSS和JS 分开。我正在寻找一种纯CSS方式来编码。我需要从一个位置控制所有id的背景属性。

非常感谢您提供的任何帮助，谢谢。

Answer 1

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

将这两个属性添加到您的班级

DEMO

Answer 2

将背景更改为背景图像，它将起作用：）

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

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

2 个答案: