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

я пытаюсь добавить альфа-эффект для моего изображения. изображение имеет прямоугольную форму с закругленными углами. я знаю, что в CSS3 есть атрибуты для изменения альфы, но я пытаюсь соответствовать стандарту w3c, который по-прежнему остается CSS2.

Извините, я не правильно сформулировал свой вопрос раньше. я пытался изменить альфа-канал при наведении курсора на изображение с помощью CSS2. Я думаю использовать «фоновое изображение» для 100% альфы и использовать тег img для 50% альфы. есть ли лучший способ сделать это?


image css alpha
person fei    schedule 23.07.2009    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Если изображение представляет собой PNG, вы можете включить альфа-канал непосредственно в изображение. Конечно, для этого потребуется скрипт PNG Fix для 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 */
}
person TJ L    schedule 23.07.2009
comment
Совет по поводу PNG и IE6 действительно требуется только при работе с файлами PNG-24 — IE6 прекрасно поддерживает файлы PNG-8 с прозрачностью. - person Bryan Rehbein; 23.07.2009
comment
Кстати, непрозрачность: 0,5; работает в IE8, вам не нужен стиль -ms-filter - Режим браузера: IE8, Режим документа: Стандарты IE8. - person Bryan Rehbein; 23.07.2009
comment
я знаю, что могу использовать фильтр и непрозрачность, но они только для css3. я все еще пытаюсь использовать css2, потому что хочу проверить его для w3c - person fei; 24.07.2009

arrow_upward
1
arrow_downward

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

person Bryan Rehbein    schedule 23.07.2009

arrow_upward
0
arrow_downward

Еще более простое решение, если вы можете выдержать немного худший пользовательский интерфейс для IE6, состоит в том, чтобы использовать альфа-прозрачное изображение для всех современных браузеров и отправлять изображение без прозрачности (или только одноцветное) в IE6. Выглядит немного хуже для тех немногих пользователей, но требует гораздо меньше кода для поддержки.

person Emil Stenström    schedule 23.07.2009