CSS IE7背景

Question

我有CSS：

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

但IE 7/8/9不显示图像。

来自：

<img class="dot-preview">

我的代码出了什么问题？这是IE的错误吗？

Answer 1

为空图像标记指定背景几乎没有意义。改为使用<div>元素，关键是给它正确的宽度和高度：

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

在CSS中：

.dot-preview {
    width: 300px;
    height: 300px;
    /* ... */
}

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

Answer 2

为图像设置高度和宽度。

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

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

修改

在IE中，透明占位符应为​​2x2px宽。因为如果它们是1px宽的话会产生视觉错误

Answer 3

执行以下操作：

<强> HTML

<img class="dot-preview" />

<强> CSS

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

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

Answer 4

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

基本上你应该为你想拥有背景图像的班级display block，或者你可以在div中使用班级.dot-preview

来完成这整件事

Answer 5

试试这个

<强> HTML

<img class="dot-preview" />

<强> CSS

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