CSS прозрачность - кросс-браузерное решение. Создание прозрачного фона в HTML и CSS (эффекты opacity и RGBA)


Средствами CSS можно задать прозрачность двумя способами.С помощью свойства opacity или свойства rgba.

Opacity - Определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.

Синтаксис opacity: значение

Степень прозрачности задается в диапазоне 0 (полностью прозрачен) до 1 (полностью не прозрачен).

К примеру нам надо, чтобы наша картинка была на половину прозрачной

Прозрачность

Добавляем стили

Img1 { Opacity: 0.5; /* Полупрозрачность элемента */ }

Но к сожалению еще не все браузеры поддерживают opacity. Для полной кроссбраузерности применяем:

  • filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); - для ИЕ версии выше 5.5-7 прозрачность реализуется с помощью фильтра Alpha DirectX. Значение задается в диапазоне от 0 до 100. Сокращенный (не рекомендуемый) вариант - filter: alpha(opacity=50);
  • -moz-opacity - для старых версий Mozilla (1.6 и ниже) и Firefox (до 1.6)
  • -khtml-opacity - для Safari 1.1 и Konqueror 3.1

    • Img1{ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/ -moz-opacity: 0.5; /* Mozilla 1.6 и ниже */ -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */ opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */ }

    Так же на IE может не работать если не указаны width (ширина) или height (высота).

    Свойство RGBA позволяет задать фоновый цвет с альфа-каналом. Альфа-канал определяет прозрачность элемента.

    Значение 0 соответствует полной прозрачности, 1 - непрозрачности, а промежуточное значение вроде 0.5 - полупрозрачности.

    Синтаксис rgba: значение

    Допустим, нам нужен текст с прозрачным фоном.

    Прозрачность

    Наш текст

    Body { background-image: url(http://g.io.ua/img_aa/large/3228/01/32280132.jpg) } .rgba { font-size: 50px; color: rgb(0, 0, 0); background-color: rgba(256,256,256, 0.5); width: 300px; }

    Отличия opacity от rgba

    opacity влияет на весь блок, включая текст. Создаёт новый контекст наложения. Дочерние теги не могут быть ярче родительского элемента.

    rgba влияет только на конкретное свойство. В данном случает позволяет видеть сквозь фон и не делает текст прозрачным.

    Прозрачность в CSS довольно модная техника в последнее время, которая вызывает трудности в кроссбраузерной реализации. До сих пор не существует универсального метода, который бы позволял реализовать прозрачность для всех браузеров. Однако в последнее время ситуация заметно улучшилась.

    В этой статье подробно рассмотрены существующие подходы, а также приведены примеры кода и пояснения, которые помогут вам добиться одинакового результата во всех браузерах с минимальными трудозатратами.

    Стоит упомянуть следующий момент: несмотря на то что прозрачность используется вот уже в течение нескольких лет, она никогда не была частью стандарта CSS. Это нестандартное свойство, которое должно стать частью спецификации CSS3.

    Старый подход

    В старых версиях Firefox и Safari необходимо применять свойство следующим образом:

    #myElement { -khtml-opacity: .5; -moz-opacity: 0.5; }

    Свойство -khtml-opacity использовалось в старых версиях webkit-браузеров. Это свойство устарело и больше не нужно, кроме случаев когда вы уверены, что значительная часть трафика вашего сайта исходит от посетителей, использующих Safari 1.x, что, конечно, маловероятно.

    В следующей строке используется свойство -moz-opacity , которое работало на очень ранних версиях движка Mozilla. Firefox прекратил его поддержку в версии 0.9.

    CSS прозрачность в Firefox, Safari, Chrome и Opera

    Для большинства современных браузеров достаточно использовать следующее свойство:

    #myElement { opacity: .7; }

    В приведённом примере, элементу устанавливается значение непрозрачности 70% (30% прозрачности). То есть если мы установим значение в единицу, то элемент будет непрозрачным, и, соответственно, установка этого значения в ноль, сделает его невидимым.

    Свойством opacity обрабатывается 2 десятичных цифры. То есть значение ".01" будет отличаться от значения ".02", хоть это и мало заметно.

    CSS прозрачность для Internet Explorer

    Как обычно, Internet Explorer не дружит с остальными браузерами. К тому же у нас сейчас в довольно широком использовании три версии этого браузера, установка прозрачности в каждой из которых различна и иногда требует дополнительных усилий для получения положительного результата.

    #myElement { filter: alpha(opacity=40); }

    В этом примере используется свойство filter , которое работает в версиях 6-8, однако для версий 6 и 7 есть одно ограничение: у элемента свойство hasLayout должно быть установлено в true . Это свойство присутствует только в IE и подробнее о нём можно почитать, например, на Хабре .

    Ещё один способ установить прозрачность используя CSS в IE8 - это использовать следующий подход (обратите внимание на комментарии):

    #myElement { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* работает в IE6, IE7 и IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* только для IE8 */ }

    Первая строка будет работать во всех сейчас используемых версиях, вторая же - только в IE8. Обратите внимание, что во второй строке используется префикс -ms- , а значение взято в кавычки.

    Установка и изменение CSS прозрачности с помощью JavaScript или jQuery

    Вы можете использовать следующий код для установки прозрачности:

    Document.getElementById("myElement").style.opacity = ".4"; // для большинства браузеров document.getElementById("myElement").style.filter = "alpha(opacity=40)"; // для IE

    Конечно же, в этом случае гораздо проще использовать jQuery, кроме того, работать будет во всех браузерах:

    $("#myElement").css({ opacity: .4 }); // работает во всех браузерах

    Вы можете анимировать это свойство:

    $("#myElement").animate({ opacity: .4 }, 1000, function() { // Анимация завершена; этот код работает во всех браузерах. });

    Функция RGBA

    В CSS3 планируется поддержка альфа-канала с помощью функции rgba . Эта функция работает в Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+. Используется она так:

    #rgba { background: rgba(98, 135, 167, .4); }

    В этом случае последний параметр указывает на уровень непрозрачности.

    Функция HSLA

    Подобно предыдущей функции, CSS3 также позволяет задать полупрозрачный цвет с помощью функции HSLA , параметры которой означают тон (Hue), насыщенность (Saturation), яркость (Lightness) и альфа-канал (Alpha).

    #hsla { background: hsla(207, 38%, 47%, .4); }

    Важный момент при использовании функций rgba и hsla - это то, что установка прозрачности не применяется к дочерним элементам, тогда как использование свойства opacity - наследуется.

    Определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.

    Краткая информация

    Обозначения

    Описание Пример
    <тип> Указывает тип значения. <размер>
    A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
    A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
    A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
    Группирует значения. [ crop || cross ]
    * Повторять ноль или больше раз. [,<время>]*
    + Повторять один или больше раз. <число>+
    ? Указанный тип, слово или группа не является обязательным. inset?
    {A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
    # Повторять один или больше раз через запятую. <время>#
    ×

    Значения

    В качестве значения выступает число из диапазона . Значение 0 соответствует полной прозрачности элемента, 1, наоборот — его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6 .

    Песочница

    Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

    div { opacity: 1 ; }

    Пример

    opacity

    Результат данного примера показан на рис. 1.

    Рис. 1. Результат использования opacity

    Объектная модель

    Объект .style.opacity

    Примечание

    Firefox до версии 3.5 поддерживает свойство -moz-opacity .

    Internet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter : alpha(opacity=50) , где параметр opacity может принимать значение от 0 до 100.

    Спецификация

    Каждая спецификация проходит несколько стадий одобрения.

    • Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
    • Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
    • Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
    • Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
    • Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
    • Draft (Черновик спецификации ) - первая черновая версия стандарта.
    ×

    CSS прозрачность - кросс-браузерное решение - 3.6 out of 5 based on 5 votes

    В данном уроке мы рассмотрим CSS прозрачность, узнаем как придать различным элементам страницы прозрачность и добиться полной кросс-браузерности, т. е. одинаковой работы этого эффекта в различных браузерах.

    Как задать прозрачность любого элемента

    В CSS3 за создание прозрачных элементов отвечает свойство opacity, которое можно применять к любым элементам. У данного свойства имеются значения от 0 до 1, которые и определяют степень прозрачности. Где 0 - это полная прозрачность, (значение по умолчанию для всех элементов), а 1 полная непрозрачность. Записываются значения дробями: 0.1, 0.2, 0.3 и т. д.

    Пример использования:

    Прозрачность

    Кросс-браузерность прозрачности

    Не все браузеры одинаково воспринимают и реализуют указанное выше свойство opacity. В некоторых случаях необходимо использовать другое название свойства или фильтры.

    Свойство CSS3 opacity поддерживают следующие виды браузеров Mozilla 1.7 +, Firefox 0.9 +, Safari 1.2 +, Opera 9 +.

    Такой хороший:) браузер как Internet Explorer вплоть до версии 9,0 не поддерживает свойство opacity и для создания прозрачности для этого браузера нужно использовать свойство filter и значение alpha(Opacity=X), в котором Х - это целое число в диапазоне от 0 до 100 при помощи которого определяется уровень прозрачности. 0 - это полная прозрачность, а 100 - полная непрозрачность.

    Что касается браузера Firefox до версии 3.5 он поддерживает свойство -moz-opacity вместо opacity.

    Такие браузеры как Safari 1.1 и Konqueror 3.1, построенные на движке KHTML, используют для управления прозрачностью свойство: -khtml-opacity.

    Как же задать в CSS прозрачность, чтобы это выглядело во всех браузерах одинаково? Для создания кросс-браузерного решения для прозрачности элементов им нужно прописывать не только одно свойство opacity, а следующий набор свойств:

    filter: alpha(Opacity=50); /* Прозрачность для IE */ -moz-opacity: 0.5; /* Поддержка Mozilla 3.5 и ниже */ -khtml-opacity: 0.5; /* Поддержка Konqueror 3.1 и Safari 1.1 */ opacity: 0.5; /* Поддержка всех остальных браузеров */

    Прозрачность различных элементов

    Рассмотрим некоторые примеры задания прозрачности определенным элементам, которые чаще всего используются на странице.

    CSS прозрачность картинки.

    Рассмотрим несколько вариантов создания полупрозрачной картинки. В следующем примере первой картинки не задана прозрачность, вторая имеет прозрачность 50%, третья 30%.

    Прозрачность

    Результат:

    Прозрачность на CSS при наведении курсора на картинку.

    Часто необходимо сделать прозрачным картинку или любой другой элемент в тот момент когда на его наведен курсор. Сделать это можно при помощи CSS псевдокласса:hover. Для этого нашей картинке нужно прописать два класса один обычный - это будет неактивное состояние картинки и второй класс с псевдоклассом:hover, здесь необходимо указать прозрачность картинки в момент наведения курсора.

    Прозрачность

    Результат можете посмотреть в демо.

    Прозрачность фона на CSS.

    Здесь необходимо помнить, что прозрачность распространяется на все вложенные элементы и они не могу обладать большей прозрачностью чем вложенный элемент.

    В качестве примера приведем вариант с фоном страницы созданным при помощи картинки и блоком с фоном созданным при помощи цвета и обладающим прозрачностью 50%.

    Пример кода:

    Прозрачность

    Текст

    Вот результа размещенного выше кода:

    Свойство CSS opacity отвечает за прозрачность элементов (картинки, текста, блоки) в html.

    Синтаксис CSS opacity

    Где value может принимать вещественные значения в диапазоне от 0.0 до 1.0. Значение 1.0 — означает, что прозрачность отсутствует (по умолчанию).

    Пример №1. Прозрачное изображение в html

    Первая картинка выведена без прозрачности, вторая с прозрачностью 0.5



    Полупрозрачность элемента


    Делаем изображение полупрозрачным при наведении!



    ДемонстрацияСкачать исходники

    Спасибо за внимание!

    Следующая статья
    Как создать div блок с прокруткой?
    

    2024 © gtavrl.ru.