0

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

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

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

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

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

我的“身份证”

#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 的背景属性。

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

4

2 回答 2

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

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

演示

于 2014-11-18T09:49:36.767 回答
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>

于 2014-11-18T09:50:30.667 回答