Кроссбраузерная прозрачность на CSS
Прозрачность достаточно часто используется при создании анимационных эффектов. Например, самый простой пример - плавная смена изображений через изменение прозрачности. Однако, очень часто используют свойство opacity, которое, кстати, из CSS3, поэтому в старых браузерах не работает. В принципе, сейчас это не критично, но те, кто хочет адаптировать свой сайт и под старые браузеры (например, заказчик попросил), то прочитайте в этой статье, как сделать кроссбраузерную прозрачность на CSS.
Для начала HTML-код:
<img src="images/photo.jpg" alt="Фотография" />
Думаю, что тут особо объяснять нечего - просто вставили изображение. Теперь CSS-код, который сделает это изображение наполовину прозрачным:
img {
filter: alpha(Opacity=50);
opacity: 0.5;
}
Данный код будет работать и в старых браузерах, и в новых. Я думаю понятно, что filter - это для старых версий IE. А opacity для всех современных браузеров.
И для закрепления материала давайте с Вами сделаем такую задачу: при наведении курсора мыши на изображение оно должно стать полностью непрозрачным, а при отведении курсора снова становиться наполовину прозрачным. В общем, достаточно классическая задача. Безусловно, этот скрипт должен быть кроссбраузерным. Итак, для начала HTML-код:
<img src="images/photo.jpg" alt="Фотография" onmouseover="opacityUp(this)" onmouseout="opacityDown(this)" />
Здесь мы добавили обработчики событий. CSS-код остаётся прежним. А теперь JavaScript:
<script type="text/javascript">
function opacityUp(img) {
/* При наведении курсора мыши на изображение */
img.style.opacity = 1; // Для всех современных браузеров
img.style.filter = "alpha(opacity=100)"; // Для старых IE
}
function opacityDown(img) {
/* При уходе курсора мыши с изображения */
img.style.opacity = 0.5; // Для всех современных браузеров
img.style.filter = "alpha(opacity=50)"; // Для старых IE
}
</script>
Вот таким образом делается кроссбраузерная прозрачность на CSS.
-
Создано 07.02.2014 13:08:26
-
Михаил Русаков
Комментарии (6):
Интересный способ! Спасибо.
Ответить
Сейчас просьба сверстать сайт под IE6 выглядит просто смешно... Тем более что в XP он обновляется аж до 8. Тем не менее, есть же уникумы... Но вообще-то старые IE не поддерживают в полной мере вообще никакой CSS, не говоря уже о CSS3. Для таких браузеров самое то - вёрстка таблицами, как в старом добром 1999-м...
Ответить
не поспоришь) хотя,из моей практики - попадаются заказчики,которые просят под IE 6-7 адаптировать
Ответить
Вопрос вне темы.А где найти тот сайт ТНТ который вы создаете в курсе HTML?
Ответить
В сети интернет, его нету.
Ответить
можно сделать проще <style> img {opacity: 0.5;} img:hover {opacity: 1;} </style>
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.