Html CSS IE7背景

我有CSS：

.dot-preview {
    background: url("../images/dot.png") no-repeat scroll 0 0 transparent;
}

但是IE 7/8/9没有显示图像

致电：

<img class="dot-preview">

---

我的代码有什么问题？这是IE bug？

将背景指定给空图像标签没有什么意义。改用

元素，关键是给它适当的宽度和高度：

<div class="dot-preview"></div>

---

输入正确的图像宽度和高度，它应该可以正常工作。

为图像设置高度和宽度

.dot-preview {
    background: url("../images/dot.png") no-repeat scroll 0 0 transparent;
    height: 100px;
    width: 100px;
}

您可能还希望在图像的src中有一个透明的2x2px图像，否则IE将显示一个“未找到”图标

编辑：

在IE中，透明占位符的宽度应为2x2px。如果它们的宽度为1px，则会产生视觉缺陷，请执行以下操作：

HTML

<img class="dot-preview" />

<img class="dot-preview" />

您可以根据需要更改宽度和高度

.dot-preview {
    background-image: url("../images/dot.png");
    background-repeat: no-repeat;
    display:block;
    width: 800px;
    height: 600px;
}

基本上，你应该为你想要有背景图像的类设置

显示块

，或者你可以用class

在div中设置整个内容。点预览

试试这个

HTML

<img class="dot-preview" />

<img class="dot-preview" />

---

为什么您同时使用Img的HTML元素/标记以及CSS背景来显示您的图像。图像文件可能不在图像目录中。仔细检查图像文件的相对路径，因为它是相对于CSS文件而不是HTMl文件的。此外，您的img元素/标记缺少src属性。同时给它一个alt属性，看看当图像文件本身丢失时，是否会显示替代文本而不是图像。图像正确，src现在是空图像，宽度和高度设置无效。你是说img上的

src=”“

？我不确定浏览器是否应该显示空图像。有意义的是，这是用于jquery脚本的，并且图像src会随着鼠标悬停而改变。如果我更改为div，它将停止工作。因此，指定图像源将隐藏您试图应用的任何背景。对不起，图像背景会随着鼠标悬停而更改。@GabrielSantos您能在JSFIDLE中复制它吗？@GabrielSantos什么点？我看不出Chrome和IE9在浏览该网站时有什么区别。不起作用。宽度、高度和显示块已定义，src是1 x 1px的图像。@Gabriel Santos:这段代码在IE7、8和ff中适用。如果图像很小，您可以将“不重复”更改为“重复”。我在宽度行中有一个输入错误，您复制粘贴了吗？如果是这样，请再试一次，我已解决了问题；最后

.dot-preview {
    background:#000 url("../images/dot.png") repeat scroll 0 0;
}