Изменить альфа-код при наведении курсора мыши на изображение в стандарте CSS2?
Вопрос
я пытаюсь добавить альфа-эффект к своему изображению.изображение имеет прямоугольную форму с закругленными углами.я знаю, что в CSS3 есть атрибуты для изменения альфа-версии, но я пытаюсь соответствовать стандарту w3c, который по-прежнему является CSS2.
Извините, что я не совсем корректно сформулировал свой вопрос ealier.я пытался изменить альфа-код при наведении курсора мыши на изображение с помощью CSS2.я подумываю использовать "фоновое изображение" для 100% альфа-версии и использовать тег img для 50% альфа-версии.есть ли какой-нибудь лучший способ сделать это?
Решение
Если изображение является PNG, вы можете включить альфа-версию непосредственно в изображение.Конечно, для этого потребовалось бы Исправление в формате PNG скрипт для IE6.
В противном случае вы можете использовать CSS для настройки прозрачности.
Редактировать:Обновлено, чтобы работать только при наведении курсора мыши, обратите внимание, что это не будет работать в IE6.
img.transparent{
filter: alpha(opacity=100); /* internet explorer */
opacity: 1; /* fx, safari, opera, chrome */
}
img.transparent:hover {
filter: alpha(opacity=50); /* internet explorer */
opacity: 0.5; /* fx, safari, opera, chrome */
}
Другие советы
Типичный способ, которым веб-разработчик реализует прозрачные эффекты, - это использование частично прозрачного файла PNG в качестве фона.
div {
background: #FFF url(img/bg.png) repeat top left;
}
Использование png будет работать так, как вы ожидаете, однако непрозрачность работает не так, как ожидалось:
div {
filter: alpha(opacity=50); /* IE */
-moz-opacity: 0.5; /* Firefox */
-webkit-opacity: 0.5; /* Older Safari, Webkit */
opacity: 0.5; /* CSS Standard - Always last in the list */
}
Это сделает DIV прозрачным на 50%, включая все его дочерние элементы, текст и все остальное.Вам действительно нужно будет поиграться с настройками непрозрачности, чтобы убедиться, что вы получите результаты, которых следовало бы ожидать.
Еще более простое решение, если вы можете выдержать немного худший пользовательский интерфейс для IE6, заключается в использовании альфа-прозрачного изображения для всех современных браузеров и отправке изображения без прозрачности (или только одноцветного) в IE6.Выглядит немного хуже для тех немногих пользователей, но требует намного меньше кода для обслуживания.