CSS: Прозрачность
Для создания эффекта прозрачности в CSS используется свойство opacity.
Браузер IE8 и более ранние его версии поддерживают альтернативное свойство — filter:alpha(opacity=x) , где » x » может принимать значение от 0 до 100 , чем меньше значение, тем прозрачнее будет элемент.
Все остальные браузеры поддерживают стандартное CSS свойство opacity , которое может принимать в качестве значения числа от 0.0 до 1.0 , чем меньше значение, тем прозрачнее будет элемент:
Прозрачность при наведении
Псевдо-класс :hover позволяет изменять внешний вид элементов при наведении на них курсора мыши. Мы воспользуемся этой возможностью, чтобы изображение при наведении мыши теряло свою прозрачность:
Прозрачность фона
Есть два возможных способа сделать элемент прозрачным: свойство opacity , описанное выше, и указание цвета фона в RGBA формате.
Возможно вы уже знакомы с моделью представления цвета в формате RGB . RGB (Red, Green, Blue — красный, зеленый, синий) — цветовая система, определяющая оттенок путем смешивания красного, зеленого и синего цветов. Например, для задания желтого цвета для текста можно воспользоваться любым из следующих объявлений:
color: rgb(255,255,0); color: rgb(100%,100%,0);
Цвета, заданные с помощью RGB , будут отличаться от шестнадцатеричных значений, используемых нами до этого тем, что позволяют использовать альфа-канал прозрачности. Это значит, что сквозь фон элемента с альфа-прозрачностью будет видно то, что располагается под ним.
Объявление цвета RGBA схоже по синтаксису со стандартными правилами RGB . Однако, кроме всего прочего, нам потребуется объявить значение как RGBA (вместо RGB ) и задать дополнительное десятичное значение прозрачности после значения цвета в промежутке от 0.0 (полная прозрачность) до 1 (полная непрозрачность).
color: rgba(255,255,0,0.5); color: rgba(100%,100%,0,0.5);
Разница между свойством opacity и RGBA заключается в том, что свойство opacity применяет прозрачность ко всему элементу целиком, то есть все содержимое элемента становится прозрачным. А RGBA позволяет задать прозрачность отдельным частям элемента (например, только тексту или фону):
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
Примечание: значения RGBA не поддерживаются в браузере IE8 и более ранних версиях. Для объявления резервного варианта цвета для старых браузеров, не поддерживающих значения цветов с альфа-каналами, следует указать его первым до значения RGBA :
background: rgb(255,255,0); background: rgba(255,255,0,0.5);
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2024 © puzzleweb.ru | razumnikum.ru
Как сделать прозрачным только родительский элемент div
Есть такой блок: Серый фон — .item
#novelty .item
Это правило делает прозрачным все элементы внутри блока .item. Как сделать чтобы был прозрачным только блок .item, а не элементы внутри него.
Отслеживать
задан 16 ноя 2017 в 15:29
Бекжан Сейткали Бекжан Сейткали
83 1 1 золотой знак 1 1 серебряный знак 9 9 бронзовых знаков
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Надо убрать opacity: 0.8 , а прозрачность задать через background: rgba() .
#novelty .item
Отслеживать
9,644 4 4 золотых знака 35 35 серебряных знаков 72 72 бронзовых знака
ответ дан 16 ноя 2017 в 15:35
2,394 6 6 серебряных знаков 17 17 бронзовых знаков
- css
- css3
- html5
- вёрстка
- opacity
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.3.2953
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как сделать элемент прозрачным в css
Как задать прозрачность?
- Свойство opacity.
- Использование PNG -картинки
- Формат системы RGBA
- Ну, и наконец, древность или клетчатые изображения.
CSS свойство Opacity
Применение стилевого CSS свойства оpacity позволяет задать прозрачность того элемента, к которому применяется. Значения, которые можно использовать в качестве аргумента изменяются в пределах от 0 до 1.
Рассмотрим пример.
DOCTYPE html> html> head> title>TODO supply a titletitle> meta charset="UTF-8"> link rel="stylesheet" media="all" type="text/css" href="css/style2.css" /> head> body> div class=" prozrachen "> Тут будет много Вашего текста div> body> html>
body background: url(./vaden-pro-logo.png); /* Фон для тела страницы */ > . prozrachen padding: 10px; /*Отступы для текста*/ background: darkturquoise; /* Задаем цвет фона */ margin: 0 auto; /* Центрируем блок */ width: 50%; /* Задаем ширину блока */ opacity: 0.7; /* Задаем прозрачность */ font: 48px/64px Times New Roman; text-align: justify; >
В результате мы получили полупрозрачный блок:
- Opacity принимает значения из диапазона: 0 (полная прозрачность) — 1 (непрозрачность).
- Кросс-браузерность. В IE до седьмой версии включительно Opacity не поддерживается. Добиться одинакового отображения элемента поможет следующая строчка:
filter: alpha(Opacity=70);
- с абсолютным позиционированием (position: absolute)
- с фиксированным линейным размером (height или width).
Для лучшего понимания материала последнего пункта, в предыдущем примере зададим тексту белый цвет
color: white;
и рассмотрим его под микроскопом:
Как видим, контент нашего блока (текст) тоже стал полупрозрачным. Но что делать, если на практике прозрачность содержимого вас не интересует, а интересует лишь прозрачность фона? В таком случае, переходим к следующему пункту.
Использование PNG -картинки
Интересной особенностью формата PNG является то, что он имеет 256 уровней прозрачности. Думаю, Вы уловили ход мыслей, и наверняка уже построили алгоритм работы такого подхода. Мне остается только его озвучить.
- Создаем в Photoshop, однотонную полупрозрачную картинку (назовем ее transparent) и сохраняем в формате png.
- Используем ее в качестве бэкграунда:
body background: url(./vaden-pro-logo.png); > .prozrachen padding: 10px; background: url(./transparent.png); margin: 0 auto; width: 50%; font: 48px/64px Times New Roman; color: white;li> text-align: justify; >
В результате мы получили блок с прозрачным фоном и непрозрачным содержимым:
- В отличии от свойства opacity прозрачность задается только для фона
- Кросс-браузерность. Работает почти во всех браузерах, и это плюс. Но прозрачность PNG не поддерживается в IE6. Если вы оптимизируете свой сайт под такую древность — придется применять другие методы или скрипты.
- При отключении отображения картинок, ваш фон пропадет (учтите этот момент при оптимизации отображения на мобильных устройствах, ведь безлимитный интернет не всегда есть под рукою).
- Для изменения цвета и/или степени прозрачности вам нужно создать новую картинку и перезалить ее на серв.
Формат системы RGBA
Одним из самых современных методов изменения транспарантности фона является применение системы RGBA.
RGBA – система представления цвета при помощи трех стандартных каналов RGB (красный, зеленый, синий), и четвертого, так называемого Alpha-канала, характеризующего степень прозрачности.
background: rgba(r, g, b, a);
В уже известном нам примере, заменим содержимое в CSS файле на следующее:
body background: url(./vaden-pro-logo.png); /* Фоновый рисунок */ > .prozrachen padding: 10px; background: rgba(0, 206, 209, 0.7); margin: 0 auto; width: 50%; font: 48px/64px Times New Roman; color: white; text-align: justify; >
- В отличии от свойства opacity прозрачность задается только фону
- В отличии от метода PNG картинки, для изменения цвета или степени транспарентности нам нужно просто поменять значения rgba.
- Кросс-браузерность. Работает во всех современных браузерах (начиная с IE9, Op10, Fx3,Sf3.2).Для более старых браузеров придется либо пожертвовать прозрачностью, либо применять opacity, png методы.
Клетчатые изображения, или с уважением к истории
Этот метод стоял у истоков веб-дизайна, и видел старые-старые браузеры, которые ничего толком не умели. Он заключается в создании клетчатого фона, в котором цветные квадратики чередовались с прозрачными.
В результате применения такой картинки в качестве background получали псевдо-прозрачный фон.
- При просмотре текста на таком фоне могут быстро уставать глаза (особенно давит рябь при прокрутке).
- В остальном особенности применения аналогичны с методом «PNG -картинки».
Подытожим?
Напоследок, несколько общих рекомендаций по использованию прозрачности в своих проектах:
- Под прозрачным блоком должна находиться яркая не однообразная картинка. На однотонном фоне изюминка прозрачности теряется.
- При выборе конкретного практического подхода, ориентируйтесь на то, какими браузерами пользуется ваша целевая аудитория. Кросс-браузерность — вещь важная.
Прозрачность opacity
Свойство opacity определяет уровень прозрачности элемента.
Прозрачность изображения
Свойство opacity принимает значение от 0.0 до 1.0. Чем меньше значение, тем прозрачнее элемент:
opacity 1
(по умолчанию)
Изменение прозрачности при наведении мыши
Очень часто свойство opacity используется вместе с селектором :hover , чтобы изменять прозрачность элемента при наведении на него мыши:
img < opacity: 0.5; >img:hover
Объяснение примера
Первая CSS декларация аналогична той, что мы приводили в первом примере. Дополнительно к этому, мы добавили то, что должно происходить, когда пользователь наводит на одно из изображений. В данном случае при наведении пользователем мыши, отменяется прозрачность изображения. CSS код для этого — opacity: 1; .
Когда указатель мыши уводится с изображения, оно опять становится прозрачным.
Ниже пример с обратным эффектом:
img:hover
Прозрачный блок
Если к фону элемента добавлять прозрачность при помощи свойства opacity , то все дочерние элементы будут наследовать эту прозрачность. Это может привести к тому, что текст внутри полностью прозрачного элемента будет трудно читать: