Прозрачность достаточно часто используется при создании анимационных эффектов. Например, самый простой пример - плавная смена изображений через изменение прозрачности. Однако, очень часто используют свойство opacity , которое, кстати, из CSS3 , поэтому в старых браузерах не работает. В принципе, сейчас это не критич...
Прозрачность достаточно часто используется при создании анимационных эффектов. Например, самый простой пример - плавная смена изображений через изменение прозрачности. Однако, очень часто используют свойство 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="Фотография" />
Здесь мы добавили обработчики событий. 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.
