Полупрозрачный цвет css: Полупрозрачный фон / Хабр

Содержание

Цветовая модель HSL в CSS 3.

Дизайнер: — Цвет фона на плакате каким будет?
Клиент: — А какие цвета у вас есть?
Дизайнер: — Три: красный, зелёный и синий остальные — оттенки
Клиент: — Странно, в прошлый раз мне оранжевым напечатали..

Глава 4

Ранее в ходе обучения HTML и CSS 2.1 мы с Вами уяснили что цвет того или иного элемента сайта может быть определён следующими способами:

Именным значением, например: red — красный.
Значением цвета RGB, например: RGB(255,0,0) — опять таки красный.
Шестнадцатеричным значением цвета RGB, например: #ff0000 — всё тот же красный.

Об этих методах определения цвета я писал в главе «Цвет и фон» учебника CSS поэтому повторятся не стану а расскажу о ещё одном способе определения цвета, который предлагает спецификация CSS 3.

В CSS 3 вошёл ещё один способ определения цвета с помощью

HSL (от англ.

Hue, Saturation, Lightness). — это модель, в которой цвет определяется тремя параметрами: Оттенком (тоном), насыщенностью и светлотой. Давайте рассмотрим каждый параметр отдельно:

Оттенок.

Для того чтобы определить тон (Hue) нужно указать градус поворота (от 0° до 360°) цветового спектра замкнутого в цветовой круг — во сказанул!! )) В общем, смотрите на рисунок там наглядно показано откуда берётся этот угол.. Имеется, значит, радуга замкнутая в круг в котором красный всегда ориентирован на север и равен 0 градусам (ну и 360° тоже), 120 градусов это зелёный, 240° синий — это основные три цвета которые, смешиваясь, образуют ещё три дополнительных 60° жёлтый 180° голубой и 300° фиолетовый.. Ну а между этими шестью основными и дополнительными цветами расположены все остальные оттенки цветового спектра.

Насыщенность.

Второе значение (Saturation) цветовой модели HSL определяет насыщенность выбранного нами оттенка и указывается в процентах в диапазоне от 0% до 100%. Чем ближе данное значение к 100% тем цвет выглядят более чисто и «сочно» и наоборот если насыщенность стремится к 0% то цвет «линяет» и становится серым.

Светлота.

Светлота или яркость (Lightness) это третий параметр HSL. Точно так же как и насыщенность указывается в процентах.. чем выше процент, тем ярче становится цвет. Крайние значения 0% и 100% будут обозначать соответственно чёрный (отсутствие света) и белый (засвеченный) цвета, причём неважно, какой оттенок из цветового круга был выбран изначально. Оптимальное значение яркости цвета равняется 50%.

Такая вот теория.. теперь к практике..

Как обычно покажу на примере:

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Цвет HSL</title>
<style type=»text/css»>
body{
background-color:hsl(120,10%,50%);
color:hsl(60,100%,50%)
}
. blok1 {background-color:hsl(0,0%,0%)}
.blok2 {background-color:hsl(0,0%,100%)}
.blok3 {background-color:hsl(187,61%,54%)}
.blok4 {background-color:hsl(300,100%,70%)}
.blok5 {background-color:hsl(0,100%,50%)}
.blok6 {background-color:hsl(240,100%,50%)}
</style>
</head>
<body>
<div>Блок 1</div>
<div>Блок 2</div>
<div>Блок 3</div>
<div>Блок 4</div>
<div>Блок 5</div>
<div>Блок 6</div>
</body>
</html>

смотреть пример

Альфа каналы.

RGBA

На ряду со свойством opacity определяющего степень прозрачности элемента в CSS 3 появился так называемый альфа канал, который позволяет сделать цвет прозрачным непосредственно при его указании.

Так у уже знакомого нам способа определения цвета RGB (Red, Green, Blue ) появляется четвёртое значение RGBA (Red, Green, Blue, Alpha) это и есть пресловутый альфа канал который определяет степень прозрачности. Степень прозрачности, точно так же как и для свойства opacity определяется значением от 0 до 1 где 0 полностью прозрачный а 1 непрозрачный вовсе.

Пример:

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Цвет RGBA</title>
<style type=»text/css»>
body{
background-image: url(graphics/fon.gif)
}
.blok1{background-color:rgba(255,0,0,0.1)}
.blok2{background-color:rgba(255,0,0,0.5)}
. blok3{background-color:rgba(255,0,0,1)}
</style>
</head>
<body>
<div>Блок 1</div>
<div>Блок 2</div>
<div>Блок 3</div>
</body>
</html>

смотреть пример

HSLA

Цветовая модель HSLA это тоже самое, что и HSL только с добавлением альфа канала. Альфа канал в HSLA аналогичен с только что разобранным альфа каналом в RGBA, поэтому повторятся, не буду просто покажу пример:

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Цвет HSLA</title>
<style type=»text/css»>
body{
background-image: url(graphics/fon.gif)
}
. blok1{background-color:hsla(120,100%,50%,0.1)}
.blok2{background-color:hsla(120,100%,50%,0.5)}
.blok3{background-color:hsla(120,100%,50%,1)}
</style>
</head>
<body>
<div>Блок 1</div>
<div>Блок 2</div>
<div>Блок 3</div>
</body>
</html>

смотреть пример

Считается, что преимуществом цветовой схемы HSL перед RGB являются более природные естественные цвета так как формат RGB был создан специально для электроннолучевых трубок.. ну не знаю.. во первых лично у меня не столь придирчивый глаз, а во вторых какая разница ведь всё равно в итоге цвет на странице будет показан с помощью электроннолучевой трубки — ну или её аналога!? то есть в определённом сочетании красного, зелёного и синего цвета т.
е. по сути цвет HSL будет в итоге переконвертирован в RGB.
А вот что мне нравится в HSL так это то, что цвет заданный таким способом интуитивно понятен, то есть, взглянув на цифры, допустим hsl(60,100%,50%) можно сразу же представить каким приблизительно в итоге будет цвет достаточно просто держать в голове цветовой круг (радугу) и знать теорию, о которой мы говорили выше. А вот с RGB цветом ничего, как правило, непонятно до тех пор, пока в фотошопе или ещё где-нибудь не посмотришь на цифры сочетания красного, зелёного и синего.
Форматы HSL, HSLA и RGBA
воспринимают версии браузеров начиная с: IE 9.0, Opera 10.0 Firefox 3.0 … А как быть со старыми версиями браузеров решать уже Вам. Однако хочу отметить, что одному и тому же элементу цвет можно задать несколькими способами.
Ну например:
. blok {
background-color:rgb(255,0,0)
background-color:rgba(255,0,0,0.5)
}
При таком раскладе цвет в старых браузерах хоть и не будет полупрозрачным , но зато будет правильным.. конкретно в этом случае красным.

[CSS] — Как установить прозрачность с помощью линейного градиента в CSS

Узнайте, как использовать линейный градиент и rgba для настройки прозрачности элемента в CSS.

👩‍💻 Технический вопрос

Спросил 4 месяца назад в CSS by Mariana

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

HTML линейный градиент RGBA прозрачность элемент

Дополнительные вопросы по кодированию о CSS

👩‍💻 Инструкции по коду HTML, CSS и JavaScript

Спросил 9 часов назад в CSS by Anamarija

Переместите смайлики друг на друга, используя относительное позиционирование

CSS позиционирование родственник лучшее свойство смайлики

👩‍💻 Технический вопрос

Спросил 12 дней назад в CSS от Ники

заполнение кнопок

CSS кнопка набивка веб-разработка

👩‍💻 Технический вопрос

Спросил 12 дней назад в CSS by Niki

как сделать размытую тень вокруг изображения

CSS коробка-тень изображение эффект размытия эффект распространения

👩‍💻 Технический вопрос

Спросил 12 дней назад в CSS от Ники

как изменить цвет фона?

цвет фона CSS веб-дизайн дизайн веб-страницы значения цвета

👩‍💻 Технический вопрос

Спросил 12 дней назад в CSS Сара

Когда следует использовать переменные css?

УС переменные многоразовый Глобальный обновление

👩‍💻 Технический вопрос

Спросил 12 дней назад в CSS Саба

как изменить непрозрачность фона?

УС фон непрозрачность

👩‍💻 Технический вопрос

Спросил 13 дней назад в CSS от Ciara

какие продвинутые селекторы CSS

продвинутые селекторы CSS селектор братьев и сестер селектор атрибутов n-й дочерний селектор

👩‍💻 Технический вопрос

Спросил 13 дней назад в CSS от Лунгело

тип направления гибкости в css

CSS флексбокс flex-направление ряд столбец

👩‍💻 Технический вопрос

Спросил 13 дней назад в CSS by Saba

как сделать абсолютную коробку отзывчивой? он не отвечает ширине: 100%

абсолютная позиция отзывчивый процентные значения относительное положение

👩‍💻 Технический вопрос

Спросил 14 дней назад в CSS Дженнифер

что такое высота строки

высота строки Свойство CSS вертикальное пространство текст

👩‍💻 Технический вопрос

Спросил 14 дней назад в CSS от Jasmine

как отображать что-то еще при наведении курсора на кнопку?

УС парить показать свойство

👩‍💻 Технический вопрос

Спросил 15 дней назад в CSS by Charlotte

Какие есть варианты выравнивания содержимого?

УС флексбокс оправдать содержание центральные элементы

👩‍💻 Технический вопрос

Спросил 15 дней назад в CSS by Confidence

как изменить ширину контейнера

контейнер ширина Свойство CSS процент

👩‍💻 Технический вопрос

Спросил 16 дней назад в CSS by Lungelo

css удалить подчеркивание из ссылки

CSS связь украшение текста подчеркнуть стиль

👩‍💻 Технический вопрос

Спросил 16 дней назад в CSS по Лунгело

в css как разместить элементы в списке рядом друг с другом, а не друг под другом

CSS список в соответствии встроенный блок поплавок

👩‍💻 Технический вопрос

Спросил 17 дней назад в CSS от Unisha

можете ли вы объяснить положение относительного элемента CSS?

УС позиция родственник вершина левый макет

👩‍💻 Технический вопрос

Спросил 18 дней назад в CSS by OFFA

как использовать медиа-запрос

медиа-запрос CSS техника Отзывчивый дизайн разрешение экрана

👩‍💻 Технический вопрос

Спросил 18 дней назад в CSS Рикке В.

Что такое линейный градиент?

линейно-градиентный фон веб-дизайн эффект градиента CSS-функция

👩‍💻 Технический вопрос

Спросил 18 дней назад в CSS Рикке В.

где их использовать?

УС единицы родственник эм

👩‍💻 Технический вопрос

Спросил 19 дней назад в CSS Мишель

  Почему класс «Сегодня» не помещен непосредственно под класс «Визуальный»? Как мне сделать это так?

    .weatherAppBody {
            дисплей: блок;
            верхнее поле: 100 пикселей;
            поле справа: 300 пикселей;
            нижняя граница: 100px;
            поле слева: 300px;
            отступ: 80px 100px;
      
            
        }
ч2 {
    размер шрифта: 20px;
    выравнивание текста: по левому краю;
    поле: 0 авто;
    плыть налево;
}

h3 {
    вес шрифта: 100;
}

.
  текущая информация {

отображение: встроенный блок;
выравнивание текста: по левому краю;
поле: 0 авто;


}

.localInfo {
    стиль списка: нет;
    отображение: встроенный блок;
  
}

.сегодня {

  выравнивание текста: вправо;
  поле сверху: 0px;
  поле справа: 0px;
  поплавок: справа;
}

.визуальный {
  стиль списка: нет;
  поплавок: справа;
  поле сверху: 0px;
  поле справа: 0px;
  ясно: оба;
}

.Полная неделя {
размер шрифта: 20px;
 положение: нижнее; внизу: 0px;
 нижняя граница: 0px;

}

УС флексбокс заказ имущества

👩‍💻 Технический вопрос

Спросил 19 дней назад в CSS Рикке В.

что такое непрозрачность

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

👩‍💻 Технический вопрос

Спросил 19 дней назад в CSS Мишель

Когда я захожу в и помещаю фоновое изображение, как мне изменить его высоту и ширину?

фоновое изображение размер фона Свойство CSS

👩‍💻 Технический вопрос

Спросил 19 дней назад в CSS Мишель

Как сделать текст-заполнитель в поле ввода полужирным?

УС поле ввода текст-заполнитель полужирный

👩‍💻 Технический вопрос

Спросил 20 дней назад в CSS Стейси

как остановить повторение фонового изображения? Я хочу, чтобы он занимал весь экран.

фоновое изображение Свойство CSS фоновый повтор размер фона

👩‍💻 Технический вопрос

Спросил 21 день назад в CSS Честер

как переместить полосу прокрутки

CSS полоса прокрутки стиль

👩‍💻 Технический вопрос

Спросил 22 дня назад в CSS от Vennesa

как использовать высоту строки

CSS высота линии свойство регулировка

👩‍💻 Технический вопрос

Спросил 22 дня назад в CSS от Vennesa

что делает box-shadow?

УС коробка-тень HTML-элемент свойство эффект