Как изменить тег <img>, чтобы я мог выбрать изображение в CSS?

Question

У меня жестко запрограммировано изображение, но я хочу изменить его на разные темы. Как я могу это сделать? Я попытался создать диапазон и установить его свойство background-image, но оно не сработало ...

Я не хочу жестко задавать ширину / высоту, поскольку изображение, на которое я изменяю его, может быть другого размера.

Answer 1

Я не думаю, что вы можете использовать чисто CSS, если вы не укажете ширину и высоту. Так что просто установите ширину и высоту в вашем CSS вместе с вашим изображением в качестве background-image и вашим штрафом. Вы знаете, какое изображение вы используете в теме, поэтому вы должны знать его размеры.

/* Theme1.css */
.ThemeImage
{
    background-image: url('imageTheme1.jpg');
    width: 150px;
    height: 100px;
}

/* Theme2.css */
.ThemeImage
{
    background-image: url('imageTheme2.jpg');
    width: 300px;
    height: 50px;
}

и т.д.

Answer 2

Вы должны определить свою высоту и ширину, чтобы изображение появилось. В противном случае оно ограничено высотой и шириной того, что браузер по умолчанию использует для этого элемента.

Например, пустой диапазон не имеет высоты или ширины, поэтому любое фоновое изображение будет покрывать фон области 0x0. Вы заметите, что если вы введете «Я ненавижу статические размеры» в тестируемом вами диапазоне, вы получите небольшой угол вашего изображения.

Теперь вы можете установить высоту и ширину в CSS и, следовательно, не жестко закодировать их в HTML, однако вы можете сделать это только для элементов с типом отображения «блок». Вы не можете установить встроенный элемент (например, диапазон), чтобы иметь высоту, так как они встроены. Вы могли бы дать ему отступы, но это довольно удачно.

Если вы хотите, чтобы область имела высоту и ширину, но при этом оставалась встроенной, вы можете использовать display: inline-block;, но IE будет волноваться, если вы сделаете это для определенных типов элементов.

Answer 3

Я где-то читал, что вы можете применить полностью прозрачное изображение, затем установить фон на компакт-дисках, но все изображения должны быть одинакового размера. Другим решением было бы хранить все их в соответствующих папках на сервере.

Вы не можете использовать CSS для прямой установки img src.

Answer 4

Как насчет <img> с прозрачным изображением? затем вы можете изменить его css.

<img src='transparent.gif' alt='image' id='change' />

img#change { background: url(pic1.jpg); width:200px; height:200px; }

Хотя изображения должны быть одинакового размера ...