Question

<div><img class="imgClose"></div>

我尝试像这样添加，但它没有显示图像：

<style type="text/css">
.imgClose
{
   float: right;
   margin-top: -15px;
   background: 16px 16px no-repeat url(_assets/img/close.png);
}
</style>

如果我添加HTML，那么它可以工作，但我想将src放在样式类中。

<div><img class="imgClose" src="_assets/img/close.png"></div>

Answer 1

您无法从元素样式中添加元素属性（如src）。

Answer 2

.imgClose需要高度和宽度才能正确显示...

当你把src放在图像中时，div会自动获取它们，这就是你的问题：）

Answer 3

无论如何，这将无法通过验证。您的图片代码需要src属性。您可以添加空div并将图像应用为背景图像，或者需要图像标记，可以添加透明占位符图像并使用css定义其尺寸和背景图像。最好将维度添加到图像中，以便即使尚未下载元素，浏览器也可以呈现页面。

但真正的问题是你为什么要那样做？

如果您的图像是纯装饰性的，则可以将其添加为背景图像。如果它在Html中很重要，请将其保留为带有src属性的图像标记。

我假设你想创建一个关闭按钮烦人的东西。您可以更好地添加带有文本内容的链接元素，并使用css和文本替换来设置样式。

<a href="whatever" class="close-widgety-thingy">close the widget thing</a>

和css

.close-widgety-thingy {
   text-indent: -12345em;
   width: 16px;
   height: 16px;
   background: transparent url(path/to/close/image.png) no-repeat center center;
}

这是你想要达到的目标吗？

Answer 4

您必须指定width，height和display:inline-block|block;才能使img的背景正常工作，而不提供src属性。但是，我鼓励使用不同的元素，因为img元素专门用于使用src属性。

<style type="text/css">
.imgClose {
 display:block;
 width:16px;
 height:16px;
 float: right;
 margin-top: -15px;
 background: 16px 16px no-repeat url(_assets/img/close.png);
}
</style>

如何在样式类中添加src？

4 个答案: