Изменить альфа-код при наведении курсора мыши на изображение в стандарте CSS2?

StackOverflow https://stackoverflow.com/questions/1173914

  •  19-09-2019
  •  | 
  •  

Вопрос

я пытаюсь добавить альфа-эффект к своему изображению.изображение имеет прямоугольную форму с закругленными углами.я знаю, что в 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.Выглядит немного хуже для тех немногих пользователей, но требует намного меньше кода для обслуживания.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top