-2 
<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>
4

4 回答 4

2

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

于 2012-05-14T17:23:25.073 回答
1

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

当您将 src 放入图像中时，div 会自动获取它们，这就是您的问题:)

于 2012-05-14T17:25:30.163 回答
0

这无论如何都会失败验证。您的图像标签将需要 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;
}

是你想要达到的吗？

于 2012-05-14T19:00:31.983 回答
-1

您必须指定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>
于 2012-05-14T17:28:26.083 回答