admin / 18.01.2018

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

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

Синтаксис CSS opacity

opacity: value;

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

Примеры: как прозрачность в html

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

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

<html> <head> <style> .primer1{ padding: 5px; opacity: 0.5; } </style> </head> <body> <imgsrc=»https://steptosleep.ru/wp-content/uploads/2018/06/47075.jpg»> <imgclass=»primer1″ src=»https://steptosleep.ru/wp-content/uploads/2018/06/47075.jpg»> </body> </html>

На странице преобразуется в следующее

Пример №2. Эффекты с прозрачностью в html

По умолчанию блок частично прозрачный. При наведении курсора мыши блок становится ярким. Такие эффекты зачастую используются в дизайне сайтов.

<html> <head> <style> .primer2{ padding: 5px; opacity: 0.5; } .primer2:hover{ padding: 5px; opacity: 1; cursor: pointer; } </style> </head> <body> <imgclass=»primer2″ src=»https://steptosleep.ru/wp-content/uploads/2018/06/47075.jpg»> </body> </html>

На странице преобразуется в следующее

Пример №3. Прозрачный блок на изображении в html

Ниже приведен пример полупрозрачного блока, который частично закрыл изображение. Блок специально накрывает изображение не полностью с целью показать, как он выглядит на пустом фоне.

<html> <head> <style> .primer3{ padding: 5px; opacity: 1; } .block3{ width: 100px; height: 100px; background: #1E90FF; margin: 0px 0px -60px 80px; border: 1pxsolid #000; opacity: 0.5; } </style> </head> <body> <divclass=»block3″></div> <imgclass=»primer3″ src=»https://steptosleep.ru/wp-content/uploads/2018/06/47075.jpg»> </body> </html>

На странице преобразуется в следующее

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

Для обращения к opacity из JavaScript нужно писать следующую конструкцию:

object.style.opacity=»VALUE»

Читайте также:
• text-shadow
• Свойство zoom
• Отступы padding
• Отступы margin
• Как сделать рамку элементов border
• Как сделать фон на сайте html
• Как сделать анимацию в html
• Как сделать линейный градиент
• Радиальный градиент CSS

← Перейти в каталог CSS уроков

CSS прозрачность (Opacity vs RGBA)

На этом уроке мы с вами разберем такие CSS свойства – opacity и RGBA.

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

Свойство Opacity отвечает только за прозрачность элементов, а функция RGBA – за цвет и прозрачность, если указать значение прозрачности альфа-канала.

CSS прозрачность Opacity

Цифровое значение для opacity задано в пределах от 0.0 до 1.0, где ноль это полная прозрачность, а единица наоборот — абсолютная непрозрачность. Например, для того, чтобы увидеть 50% прозрачности, надо выставить значение в 0.5. Надо иметь ввиду, что opacity распространяется на все дочерние элементы родителя. А это значит, что и текст на полупрозрачном фоне, тоже будет полупрозрачным. А это уже очень существенный недостаток, текст не так хорошо выделяется.

На скриншоте отчётливо видно, что черный текст стал таким же полупрозрачным, как и голубой фон.

CSS прозрачность в формате RGBA

Формат для записи цвета RGBA, является более современной альтернативой для свойства opacity. R (red), G (green), B(blue) – значит : красный, зеленый, синий. Последняя буква A – означает альфа-канал, который и задает прозрачность. RGBA в отличии от Opacity не влияет на дочерние элементы.

Теперь давайте рассмотрим наш пример с использованием RGBA. Заменим эти строчки в стилях.

на следующую одну строку

Как вы видите значение прозрачности 0.3 совпадает у обоих методов.

Результат примера с RGBA:

Второй скриншот намного лучше смотрится, чем первый.

Играясь с полупрозрачностью фона блоков, можно добиться на сайте интересных эффектов. Важно, чтобы эти полупрозрачные блоки шли поверх пестрого рисунка, например фотографии. Только в этом случае эффект будет заметен. Этот прием уже давно применялся в дизайне, ещё до появления всяких CSS3, реализовывался он чисто в графических программах.

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

Вывод

Формат RGBA поддерживают все современные браузеры, за исключением Internet Explorer. Ещё очень важно, что RGBA гибок, он действует только на конкретный заданный элемент, не затрагивая дочерних. Понятно, что для верстальщика это удобнее. Мой выбор однозначно в пользу формата RGBA для получения прозрачности в CSS.

Для лучшего закрепления материала и большей наглядности, предлагаю вам пройти мой видео-курс.

  • Создано 01.02.2018 09:22:30

  • Михаил Русаков

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так:

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Прозрачность opacity или rgba | CSS

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

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

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

Синтаксис

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

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

HTML

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

CSS

Но к сожалению еще не все браузеры поддерживают 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

    • CSS

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

    RGBA

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

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

    Синтаксис

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

    HTML

    CSS

    Отличия opacity от rgba

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

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

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

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

    Для создания эффекта прозрачности в CSS используется свойство opacity.

    Браузер IE8 и более ранние его версии поддерживают альтернативное свойство — , где «» может принимать значение от до , чем меньше значение, тем прозрачнее будет элемент.

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

    <!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Название документа</title> <style> .myClass { float: left; margin-right: 5px; opacity: 0.4; filter: alpha(opacity=40); /*для IE8 и более ранних версий*/ } </style> </head> <body> <img src=»https://steptosleep.ru/wp-content/uploads/2018/06/45671.jpg» class=»myClass»> <img src=»https://steptosleep.ru/wp-content/uploads/2018/06/45671.jpg»> </body> </html> Попробовать »

    Прозрачность при наведении

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

    <!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Название документа</title> <style> img { float: left; margin-right: 5px; opacity: 0.4; filter: alpha(opacity=40); /*для IE8 и более ранних версий*/ } img:hover { opacity: 1.0; filter: alpha(opacity=100); } </style> </head> <body> <img src=»https://steptosleep.ru/wp-content/uploads/2018/06/45671.jpg»> <img src=»https://steptosleep.ru/wp-content/uploads/2018/06/53796.jpg»> </body> </html> Попробовать »

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

    Есть два возможных способа сделать элемент прозрачным: свойство , описанное выше, и указание цвета фона в RGBA формате.

    Возможно вы уже знакомы с моделью представления цвета в формате .

    Свойство CSS opacity

    (Red, Green, Blue — красный, зеленый, синий) — цветовая система, определяющая оттенок путем смешивания красного, зеленого и синего цветов. Например, для задания желтого цвета для текста можно воспользоваться любым из следующих объявлений:

    color: rgb(255,255,0); color: rgb(100%,100%,0);

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

    Объявление цвета схоже по синтаксису со стандартными правилами . Однако, кроме всего прочего, нам потребуется объявить значение как (вместо ) и задать дополнительное десятичное значение прозрачности после значения цвета в промежутке от (полная прозрачность) до (полная непрозрачность).

    color: rgba(255,255,0,0.5); color: rgba(100%,100%,0,0.5);

    Разница между свойством и заключается в том, что свойство применяет прозрачность ко всему элементу целиком, то есть все содержимое элемента становится прозрачным. А позволяет задать прозрачность отдельным частям элемента (например, только тексту или фону):

    body { background-image: url(img.jpg); } .prim1 { width: 400px; margin: 30px 50px; background-color: #ffffff; border: 1px solid black; font-weight: bold; opacity: 0.5; filter: alpha(opacity=70); /*для IE8 и более ранних версий*/ text-align: center; } .prim2 { width: 400px; margin: 30px 50px; background-color: rgba(255,255,255,0.5); border: 1px solid black; font-weight: bold; text-align: center; } Попробовать »

    Примечание: значения не поддерживаются в браузере IE8 и более ранних версиях. Для объявления резервного варианта цвета для старых браузеров, не поддерживающих значения цветов с альфа-каналами, следует указать его первым до значения : background: rgb(255,255,0); background: rgba(255,255,0,0.5);
    Статьи / CSS /

    Как сделать элемент прозрачным и убрать прозрачность CSS?

    1. Как сделать элемент прозрачным?
    2. Как убрать прозрачность дочернего элемента?
    3. Пример

    Для того, чтобы сделать элемент прозрачным, следует использовать CSS.

    CSS прозрачность – просто о важном

    Для стилей есть полезное свойство opacity, в котором остаётся лишь указать степень прозрачности. Где, как правило 1 или 100 — элемент не прозрачен, а 0.1 или 10 — это прозрачный элемент. Почему два значения? Потому что для IE (Internet Explorer), равно как и для других браузеров, прописываются другие свойства, и у IE прозрачность измеряется в других значениях.

    Полупрозрачный элемент

    Соответственно, чтобы сделать элемент полупрозрачным, нужно задать для opacity значение 0.5 или 50.

    Код CSS

    filter: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; /* для Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */

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

    Например, Вы задали прозрачность всем пунктам меню, а при навведении как раз хотите сделать НЕ прозрачным (убрать прозрачность), то прописываете ему следующие характеристики, где значение прозрачности равно 1 или 100:

    Код CSS

    filter:alpha(opacity=100);
    -moz-opacity:1;
    -khtml-opacity:1;
    opacity: 1;
    Не забываем указывать все 4 свойства, так как в противном случае действие будет не кроссбраузерно, то есть будет работать не во всех браузерах.

    Если хотите, чтобы полупрозрачность были при наведении на изображение, то можно создать, например такой класс

    .opacity :hover {
    filter: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; /* для Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */
    }

    Рассмотрим пример

    Создаём файл index.html

    <html>
    <head>
    <title>
    Название странички
    </title>

    <style>
    .opacity:hover {
    filter: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; /* для Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */
    }

    .square {
    width: 100px;
    height: 100px;
    background: black;
    }
    </style>

    </head>
    <body>
    <h1>Полупрозрачность элемента</h1>
    Делаем изображение полупрозрачным при наведении!

    <div class="square opacity"></div>

    </body>
    </html>

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

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

     

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

    Похожие статьи

    Комментарии к статье (vk.com)

    FILED UNDER : IT

    admin

    Submit a Comment

    Must be required * marked fields.

    :*
    :*