Question

我有这段代码：

HTML：

  <img class="d" src="i3.jpg" alt=""/><img class="d" src="i4.jpg" alt=""/>

CSS：

img.d{margin-top:10px;margin-left:20px;}

但是，我想将i3.jpg放在CSS中，而不是html中，以便将结构与演示文稿进一步分开......我该怎么做呢。

感谢。

找到了这个

link here

Answer 1

您可以将图像设置为元素的背景图像。

HTML： <div class="d"></div>

CSS： div.d{width:20px; height:20px; margin-top:10px; margin-left:20px; background:url('i3.jpg') 0 0 no-repeat;}

Answer 2

一种选择是使用例如一个div - 元素，并使用CSS将背景图像附加到其中。

Answer 3

当图像内容时，应使用img标记，就像穿着有趣服装的猫一样。移动图像对CSS的引用在它们是样式/ UI和不内容时是有意义的。

也就是说，答案是删除您的img代码并将其替换为div。然后，您可以为div设置背景图像，并为其提供一些基本属性来调整大小/位置。

HTML：

<div class="d"></div>

CSS：

div.d {
    display: block;
    background-image: url('i3.jpg');
    width: 100px; /* or whatever it should be */
    height: 100px; /* or whatever it should be */
    margin-top: 10px;
    margin-left: 20px;
}

将结构与表示分离 - html / css

3 个答案: