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

Попробуйте

HTML

<img class="dot-preview" />

css

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

Answer 3

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

В основном у вас должно быть display block для класса, для которого вы хотите иметь фоновое изображение, или вы можете получить все это в div с классом .dot-preview

Answer 4

Выполните следующие действия:

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 5

Установите высоту и ширину для вашего изображения.

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

Вы также можете захотеть иметь прозрачное изображение 2x2px в src вашего изображения, иначе IE покажет иконку "not found"

EDIT:

в IE прозрачные заполнители должны иметь ширину 2x2px. поскольку они создают визуальную ошибку, если они имеют ширину 1px