Прозрачность background image css: html — Как можно поменять прозрачность background-image не меняя прозрачности остального содержимого блока?
Содержание
background-color — CSS | MDN
CSS-свойство background-color CSS устанавливает цвет фона элемента.
background-color: red;
background-color: #bbff00;
background-color: #11ffee00;
background-color: #11ffeeff;
background-color: rgb(255, 255, 128);
background-color: rgba(117, 190, 218, 0.0);
background-color: rgba(117, 190, 218, 0.5);
background-color: rgba(117, 190, 218, 1.0);
background-color: hsla(50, 33%, 25%, 0.75);
background-color: currentColor;
background-color: transparent;
background-color: inherit;
background-color: initial;
background-color: unset;
Свойство background-color определяется единственным значением <color>.
Значения
<color>- Является CSS
<color>, которое описывает цвет фона. Даже если заданы одно или несколькоbackground-image, цвет может отрендерится, если изображения прозрачны.
Формальный синтаксис
<color>где
<color> = <rgb()> | (en-US) <rgba()> | (en-US) <hsl()> | (en-US) <hsla()> | (en-US) <hex-color> | (en-US) <named-color> | (en-US) currentcolor | (en-US) <deprecated-system-color>где
<rgb()> = rgb( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgb( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<rgba()> = rgba( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgba( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<hsl()> = hsl( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsl( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )
<hsla()> = hsla( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsla( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )где
<alpha-value> = <number> | (en-US) <percentage>
<hue> = <number> | (en-US) <angle>
HTML
<div>
Lorem ipsum dolor sit amet, consectetuer
</div>
<div>
Lorem ipsum dolor sit amet, consectetuer
</div>
<div>
Lorem ipsum dolor sit amet, consectetuer
</div>CSS
. exampleone {
background-color: teal;
color: white;
}
.exampletwo {
background-color: rgb(153, 102, 153);
color: rgb(255, 255, 204);
}
.examplethree {
background-color: #777799;
color: #FFFFFF;
}
exampleone {
background-color: teal;
color: white;
}
.exampletwo {
background-color: rgb(153, 102, 153);
color: rgb(255, 255, 204);
}
.examplethree {
background-color: #777799;
color: #FFFFFF;
}
Результат
Важно обеспечить достаточный цветовой контраст между цветом текста и фоном, чтобы люди со слабым зрением могли его прочитать, но при этом должна быть достаточная разница между введённым текстом и текстом placeholder, чтобы пользователь не путал их.
Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям Web Content Accessibility Guidelines (WCAG), требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием.
BCD tables only load in the browser
Способы создания прозрачных фонов у блоков в CSS
Вы хотите научиться создавать страницы с оригинальным и ярким современным дизайном? Применение полупрозрачных элементов способно помочь Вам в решении этой непростой задачи. Сегодня мы рассмотрим основные практические способы задания прозрачности структурных элементов.
Как задать прозрачность?
Если рассматривать данную тему сквозь призму исторического развития веб-технологий, то можно выделить следующие подходы:
- Свойство opacity.
- Использование PNG -картинки
- Формат системы RGBA
- Ну, и наконец, древность или клетчатые изображения.
CSS свойство Opacity
Применение стилевого CSS свойства оpacity позволяет задать прозрачность того элемента, к которому применяется. Значения, которые можно использовать в качестве аргумента изменяются в пределах от 0 до 1.
Рассмотрим пример.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<link rel="stylesheet" media="all" type="text/css" href="css/style2.css" />
</head>
<body>
<div>
Тут будет много Вашего текста
</div>
</body>
</html>CSS:
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);
Стоит принимать во внимание то, что свойство filter отсутствует в html спецификациях, изменяет значения от 1 до 100 и может применяться только к элементам:
- с абсолютным позиционированием (position: absolute)
- с фиксированным линейным размером (height или width).
- Степень прозрачности наследуется дочерними элементами, при чем дочернему элементу можно увеличить прозрачность, но сделать меньше – нельзя. Т. е. на полупрозрачном фоне НЕ ПРОЗРАЧНОГО текста не сделать.
Для лучшего понимания материала последнего пункта, в предыдущем примере зададим тексту белый цвет
и рассмотрим его под микроскопом:
Как видим, контент нашего блока (текст) тоже стал полупрозрачным. Но что делать, если на практике прозрачность содержимого вас не интересует, а интересует лишь прозрачность фона? В таком случае, переходим к следующему пункту.
Использование 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 -картинки».
Подытожим?
Напоследок, несколько общих рекомендаций по использованию прозрачности в своих проектах:
- Под прозрачным блоком должна находиться яркая не однообразная картинка. На однотонном фоне изюминка прозрачности теряется.
- При выборе конкретного практического подхода, ориентируйтесь на то, какими браузерами пользуется ваша целевая аудитория. Кросс-браузерность – вещь важная.
Успехов!!!
Оценок: 10 (средняя 5 из 5)
- 31235 просмотров
Понравилась статья? Расскажите о ней друзьям:
Курсы по CSS (в открытом доступе)
Уровень сложности:
Средний
Еще интересное
Наложение картинки на картинку с прозрачностью (не тестировалось) · GitHub
Наложение картинки на картинку с прозрачностью (не тестировалось) · GitHub
Instantly share code, notes, and snippets.
Наложение картинки на картинку с прозрачностью (не тестировалось)
| //Предположим, что картинка находится в диве ( <div><img src=»/images/old-image.png»></div> ) | |
| $(‘div.myimage’).hover( | |
| function(){ //при наведении мыши | |
| var sourceImg = $(‘div.myimage img’).attr(‘src’); //забираем урл картинки | |
| $(‘div.myimage img’).attr(‘/images/new-image.png’).css({opacity: 0.5}); //вставляем новую картинку и накладываем прозрачность 50% | |
| $(this).css(‘background-image’, sourceImg); //делаем оригинальную картинку фоном дива | |
| }, | |
| function(){ //при уходе мыши | |
| var sourceImg = $(this).css(‘background-image’); //забираем урл старой картинки | |
| $(‘div.myimage img’).attr(sourceImg).css({opacity: 1}); //вставляем старую картинку и возвращаем прозрачность | |
| $(this).css(‘background-image’, ‘none’); //убираем фон | |
| } | |
| ); |
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session.
You signed out in another tab or window. Reload to refresh your session.
CSS Прозрачность / прозрачность изображения
Свойство opacity определяет непрозрачность / прозрачность элемента.
Прозрачное изображение
Свойство непрозрачности может принимать значение от 0,0 до 1,0. Чем меньше значение, тем прозрачнее:
непрозрачность 0,2
непрозрачность 0,5
непрозрачность 1
(по умолчанию)
Прозрачный эффект наведения
Свойство непрозрачности часто используется вместе со свойством : hover .
селектор для изменения непрозрачности при наведении указателя мыши:
Объяснение примера
Первый блок CSS похож на код в Примере 1.Кроме того, мы добавили, что должно происходить, когда пользователь наводит курсор на одно из изображений. В этом случае мы хотим, чтобы изображение НЕ было прозрачным, когда пользователь наводит на него курсор. CSS для этого — непрозрачности: 1; .
Когда указатель мыши отодвинется от изображения, изображение снова станет прозрачным.
Пример обратного эффекта наведения:
Прозрачная коробка
При использовании свойства непрозрачности для добавления прозрачности фону элемента все его дочерние элементы
наследуют ту же прозрачность.Это может затруднить чтение текста внутри полностью прозрачного элемента:
Прозрачность с использованием RGBA
Если вы не хотите применять непрозрачность к дочерним элементам, как в нашем примере выше, используйте значения цвета RGBA .
В следующем примере устанавливается непрозрачность цвета фона, а не текста:
Из нашей главы о цветах CSS вы узнали, что вы можете использовать RGB в качестве значения цвета. Помимо RGB,
вы можете использовать значение цвета RGB с альфа-каналом (RGBA), который определяет непрозрачность цвета.
Значение цвета RGBA задается с помощью: rgba (красный, зеленый, синий, альфа ). В
альфа Параметр — это число от 0,0 (полная прозрачность) до 1,0 (полная непрозрачность).
Совет: Вы узнаете больше о цветах RGBA в нашей главе о цветах CSS.
Пример
div {
фон: rgba (76, 175, 80, 0.3) / * Зеленый фон с 30%
непрозрачность * /
}
Попробуй сам »
Текст в прозрачной рамке
Это текст, помещенный в прозрачную рамку.
Пример
div.background {
фон: url (klematis.jpg) повторять;
граница: сплошной черный цвет 2px;
}
div.transbox {
margin: 30px;
цвет фона: #ffffff;
граница: сплошной черный 1px;
непрозрачность: 0,6;
}
div.transbox p {
маржа: 5%;
font-weight: жирный;
цвет: # 000000;
}
Это текст, помещенный в прозрачное поле.