CSS для замены изображения
Gmail разрешает только знак + как специальный символ, а в некоторых случаях (.), Но любые другие специальные символы не разрешены в Gmail. В RFC говорится, что вы можете использовать специальные символы, но вам следует избегать отправки почты в Gmail со специальными символами.
5 ответов
Немного поработав, я понял это!
img.someclass {
background: url("NEW IMAGE URL") top right;
height: 0;
width: 0;
padding: 200px 550px 0 0; /* Insert actual image size (height width 0 0) */
}
Это сделает высоту и ширину фактического изображения равными 0, но расширит поле, чтобы заполнить размер изображения с обивкой. Единственным недостатком этого является то, что он не будет идеально выглядеть в старых версиях Internet Explorer.
Если у вас есть элемент, окружающий изображение, например DIV, вы должны иметь возможность установить для него фоновое изображение (вместе с отсутствием повтора и положение), а затем установить для изображения значение дисплей: нет .
В качестве альтернативы, вот случайное решение, которое, похоже, работает. Он помещает изображение за пределы экрана, а затем использует псевдоэлемент : after для установки фонового изображения. Он должен быть работоспособным, но вам нужно будет поиграть со значениями, чтобы он работал правильно. Однако это не будет работать в IE6.
<style>
img.test {
background: url('image_to_show.png') no-repeat right top;
position: relative;
left: -16000px;
}
img.test:after {
content: ".";
color: transparent;
display: block;
width: 16000px;
}
</style>
<img class="test" src="image_to_hide.png">
Лучший способ заменить изображения - это установить положение фона. Сначала создайте два разных изображения и поместите их одно над другим на одном изображении. Скажем, ваш скин-элемент 50x50 пикселей, вы создадите изображение 50x100.
Затем используйте какой-нибудь код вроде этого:
.skinElement1 {
background: #fff url("image.png") no-repeat 0 0;
}
.skinElement2 {
background: #fff url("image.png") no-repeat 0 -50px;
}
Итак, чтобы просмотреть второе изображение, вы перемещаете фон вверх на требуемую величину. Вы можете использовать javascript или код на стороне сервера для установки соответствующего класса.
вам нужно назначить разные классы для двух состояний, а затем написать некоторый javascript, чтобы изображение изменялось после события.
например:
.firsImage { background:transparent url(/images/someImage.jpg) no-repeat; }
.secondIMage { background:transparent url(/images/image2.jpg) no-repeat; }
HTML:
<div id="imageDiv" class="firstImage"> some content </div>
<a onclick="changeImage()">Change the image!</a>
Javascript:
function changeImage(){
var imageDiv = document.getElementById("imageDiv")
if ( imageDiv.className === "firsImage" )
document.getElementById("imageDiv").className = "secondImage"
else
document.getElementById("imageDiv").className = "firstImage"
}
Может быть, вы можете установить непрозрачность элемента, а затем установить фон на желаемое изображение.
Musicfreak: Я имел в виду использование ДВУХ элементов.