Как в css задать полупрозрачный белый цвет текста для элемента с классом intro используя модель rgb

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

В CSS для определения полупрозрачного цвета есть специальный формат RGBA. Этот формат задаёт цвет в виде значений трёх компонент — красной, зелёной и синей, каждая из компонент меняется от 0 до 255. Четвёртым параметром идёт степень прозрачности этого цвета, задаётся от 0 до 1. Цвет в итоге может быть полностью прозрачным, полупрозрачным или полностью непрозрачным.

С помощью функции rgba() мы можем не просто определить цвет текста, но и одновременно степень его прозрачности. Сама функция rgba() в качестве значения применяется к свойству color.

Ниже представлены варианты определения цвета текста.

color: rgba(0,0,0,0) /* Полностью прозрачный текст */ color: rgba(0,0,0,1) /* Чёрный текст */ color: rgba(0,0,0,0.5) /* Полупрозрачный чёрный текст */ color: rgba(255,255,255,0.5) /* Полупрозрачный белый текст */ color: rgba(237,28,36,0.8) /* Полупрозрачный красный текст */

В примере 1 показано создание двух блоков — для сравнения в первом блоке цвет задан белым через шестнадцатеричное значение, во втором блоке цвет задан через функцию rgba() .

Пример 1. Использование rgba()

См. также

• color
• currentColor
• text-fill-color
• Атрибут link
• Единицы цвета в CSS
• Наследование в CSS
• Работа с типографикой

Как изменить цвет текста в css

В CSS за цвет текста отвечает свойство color . Оно может применяться к любому элементу и принимать цвет в одном из форматов:

1. Шестнадцатеричная форма. Например, #0d6efd , #d63384 . Для подбора цвета и его значения используйте онлайн-сервисы, например HTML COLOR CODES
2. Текстовое название: red , green , blue . Полный список находится на сайте W3C
3. Формат RGB: rbg(255, 87, 51) . Первым значением указывается количество красного цвета, вторым значением количество синего и третьим значением количество зелёного

 class="text-white">Я белый текст 

.text-white  color: white; > 

Свойство наследуется, то есть если его указать на целый блок, то весь текст в нём будет указанного цвета

 class="text-orange"> Я оранжевый текст И я оранжевый текст  

.text-orange  color: rgb(255, 87, 51); > 

CSS: Цветовая модель RGB

При изучении курса мы сталкивались со свойствами, значениями которых является цвет. Такими свойствами были:

• color
• background-color
• border-color

Для обозначения цвета использовалась шестнадцатеричная модель RGB, которая переводится как Red Green Blue. В CSS для обозначения цвета в RGB используется две основные записи:

• Шестнадцатеричная. Это запись из 6 символов, разбитые на три блока по два значения. Каждый блок отвечает за один из цветов: красный, зелёный или синий
• С использованием функции rgb(red, green, blue) . Функция принимает три числа от 0 до 255, каждое из которых определяет количество красного, зелёного и синего цвета

Шестнадцатеричная запись

При использовании такой записи используется шестнадцатеричная система счисления. Запись делится на три блока по два числа:

1. от 00 до ff — количество красного цвета
2. от 00 до ff — количество зелёного цвета
3. от 00 до ff — количество синего цвета

/* Белый цвет */ color: #ffffff; /* Чёрный цвет */ color: #000000; 

Предположим, что для текста нужен фиолетовый цвет. Как он получается? Для этого смешивается красный и синий цвет. В фиолетовом отсутствует зелёный цвет. Значит нужна максимальная запись в первом и третьем блоке. Итого получится цвет #ff00ff

Текст фиолетового цвета

Можно получать разные вариации этого цвета, добавляя или уменьшая количество составных цветов

Функция rgb

Второй способ указать цвет с помощью цветовой модели RGB — использование специальной функции rgb() . Она принимает три числа от 0 до 255, где первое число определяет количество красного цвета, второе число — количество зелёного цвета, а третье — количество синего. Ничего не напоминает?

Если вам показалось, что это похоже на шестнадцатеричную систему, то будете правы — суть точно такая же. Только записываем цвета в привычных нам цифрах. В остальном всё то же самое, а значит можно создать фиолетовый цвет, используя функцию rgb() :

.text

Текст фиолетового цвета

А вот как будет выглядеть белый и чёрный цвет при использовании функции rgb() :

/* Белый цвет */ color: rgb(255, 255, 255); /* Чёрный цвет */ color: rgb(0, 0, 0); 

Прозрачность и функция rgba()

При использовании фонового цвета часто используют не просто цвет, но и добавляют ему прозрачность. В цветовой модели RGB для этого используется понятие «альфа»-канал. Он определяет насколько прозрачный цвет должен выводиться и задаётся числом от 0 до 1, где 0 — полностью прозрачный цвет, а 1 — полностью непрозрачный.

Чтобы использовать альфа-канал создаётся функция rgba() , где a — alpha . В остальном всё точно так же, как и было изучено ранее. Сделаем полупрозрачный фиолетовый фон:

.background

Блок с полупрозрачным фиолетовым фоном

Задание

Создайте параграф с классом background-black-50 и установите ему полупрозрачный чёрный фон. Используйте функцию rgba() . Стили запишите в теге

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет ��

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя ��

Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно ��

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

Цветовое оформление в CSS

Данная статья учебника будет посвящена работе с цветом в CSS, будут рассмотрены способы указания цвета с помощью шестнадцатеричных значений, значений цвета RGB, RGBA, HSL, HSLA и с помощью предопределённых цветов.

В CSS для указания конкретного цвета текста для элемента, необходимо использовать свойство color и затем указать необходимое значение, используя следующий синтаксис:

селектор  color : значение; > 

Давайте разберем отдельно, какие значения можно использовать с этим свойством и частично разберем примеры работы с цветом заднего фона. Более подробно работу с задним фоном элемента, мы будем с Вами рассматривать в статье «Работа с фоном элемента в CSS». И начнём мы наше обучение с самой старой системы задания цвета – шестнадцатеричной (Hexadecimal).

Шестнадцатеричные значения

Шестнадцатеричные значения цвета поддерживается всеми основными браузерами. Цвет с использованием шестнадцатеричной системы задается с использованием следующего синтаксиса:

селектор  color : #RRGGBB; > #RR (красный) #GG (зеленый) #BB (синий)

Значение, фактически содержит три шестнадцатеричных числа (RR — для красного, GG — для зеленого, BB — для синего). Каждое значение (RR, GG и BB) должно находиться в диапозоне между 00 и FF. В шестнадцатиричной системе счет ведется следующим образом: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.

Например, значение #0000FF соответствует синему цвету, так как компонент BB установлен в его самое высокое значение — (FF), а другие установлены в самое низкое значение (00). Значение, фактически содержит три шестнадцатеричных числа, значение цвета получается при смешивании трех вышеуказанных составляющих.

Обращаю Ваше внимание, что допускается сокращать шестнадцатеричные числа до трех символов, в том случае если каждое из трех двухзначных чисел содержит одинаковые символы. Например, #0000FF можно записывать как #00F, или значение #777777 можно указать следующим образом:

p.intro  color : #777; /* задаём темно-серый цвет для всех абзацев с классом intro */ > 

Цветовая модель RGB

Значения цвета RGB поддерживается во всех основных браузерах и задается в следующем порядке: R (красный), G (зеленый), B (синий). Чтобы указать значение в системе RGB необходимо использовать следующий синтаксис:

селектор  color : rgb(R,G,B); > 

Каждый параметр определяет интенсивность цвета и может быть целым числом от 0 до 255. Например, значение rgb(0,0,255); отображается как синий цвет, так как параметр синего установлен в максимальном значении (255), а красный и зелёный установлены в 0 (минимальное значение):

p  color : rgb(0,0,255); /* задаём синий цвет для всех абзацев */ > 

Хочу заранее обратить Ваше внимание на то, что допускается указывать значения цвета RGB в виде процентных соотношений. Мы с Вами подробно рассмотрим какие единицы измерения существуют и используются в CSS в следующей статье «Единицы измерения CSS, размер шрифта». Например, чтобы задать оранжевый цвет для всех заголовков второго уровня, используя систему RGB и процентные значения, необходимо использовать следующие значения параметров:

h2  color : rgb(100%,65%,0%); /* задаёт оранжевый цвет для всех заголовков второго уровня */ > 

Цветовая модель RGBA

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

селектор  color : rgba(R,G,B,A);, где: > 

• R означает Red (красный)
• G означает Green (зеленый)
• B означает Blue (синий)
• A означает Alpha (степень смешивания с фоном)

Этот метод отличается от RGB тем, что он добавляет альфа-канал, который позволяет задать уровень прозрачности со значениями от 0 до 1, где:

• 0 — цвет невидимый.
• 1 — цвет непрозрачный.

Давайте для демонстрации возможностей цветовой модели RGBA рассмотрим пример в котором на примере зелёного цвета, мы будем изменять значения альфа канала от минимального rgba(0, 255, 0, 0.1) к максимальному rgba(0, 255, 0, 1) с шагом 0.1:

   charset = "UTF-8"> Применение RGBA в CSS div  display : inline-block; /* Выстраиваем элементы в линейку, как строчные элементы, при этом у нас имеется возможность задавать размеры, как и всем блочным элементам. */ width : 60px; /* устанавливаем ширину для всех элементов */ height : 60px; /* устанавливаем высоту для всех элементов */ > .test1  background-color : rgba(0, 255, 0, .1); /* задаем цвет заднего фона, обратите внимание на значение, допускается сокращать запись 0.1 до .1 */ > …/* и так до десятого блока с шагом 0.1 */ .test10  background-color : rgba(0, 255, 0, 1); >   class = "test1">.1 …/* и так до десятого блока */  class = "test10">1   

На что в этом примере надо обратить внимание, во-первых, чем меньше значение альфа, тем элемент более прозрачен. Во-вторых, мы использовали CSS свойство display, которое определяет, как должен отображаться элемент. В нашем случае, с этим свойством мы использовали значение inline-block , которое позволяет нам выстроить все элементы в линейку (сделали элементы «блочно-строчными»). Подробное изучение блочной и строчной модели CSS предусмотрено в учебнике позднее в статье «Блочная и строчная модель в CSS».

Результат нашего примера:

Обращаю Ваше внимание, что в CSS допускается использовать сокращенное обозначение значений, например, вместо 0.3 указывать .3, вместо 0.5 указывать .5, вместо 0.625 указывать .625 и так далее.

Цветовые модели HSL и HSLA

К еще одному методу задания цвета в CSS относится система HSL, её можно значительно реже встретить на страницах сайтов. HSL это аббревиатура, которая объединяет в себе первые буквы трех следующих признаков:

• Hue — тон.
• Saturation — насыщенность.
• Lightness — осветленность.

Система HSL использует следующий синтаксис:

hsl(от 0° до 360°, от 0 до 100%, от 0% до 100%), где:

Первое значение – это тон, который указывается в градусах от 0° до 360° . Градусы соответствуют цвету на круге оттенков (изображенном ниже):

Рис. 48 Круг оттенков, применяемый при задании цвета с использованием HSL.

Красный цвет соответствует значениям — 0° и 360° , желтый — 60° , зеленый — 120° , голубой — 180° , синий — 240° , фиолетовый — 300° и так далее.

Второе значение (насыщенность) — определяет, насколько чистым является цвет и указывается в процентах от 0% до 100% , где 0% — полное отсутствие насыщенности (тусклый серый), а 100% это чистый и яркий цвет.

Третье значение (осветленность) — указывается в процентах от 0% (полностью черный) до 100% (полностью белый), среднее значение 50% даёт чистый цвет.

Давайте рассмотрим пример задания цвета с помощью системы HSL на примере красного цвета (значение тона 0° ):

   charset = "UTF-8"> Применение HSL в CSS div  display : inline-block; /* выстраиваем элементы в линейку, как строчные элементы */ width : 60px; /* устанавливаем ширину для всех элементов */ height : 60px; /* устанавливаем высоту для всех элементов */ > .test1  background-color : hsl(0, 10%, 50%); /* 0 – соответствует красному цвету, 10% - насыщенность, 50%- осветленность (соответствует чистому цвету) */ > … /* и так до десятого блока с шагом 10% (увеличение насыщенности) */ .test10  background-color : hsl(0, 100%, 50%); /* насыщенность 100% (чистый и яркий цвет) */ > .test11  background-color : hsl(0, 100%, 10%); /* 0 – соответствует красному цвету, 100% - насыщенность (чистый и яркий цвет), 10%- осветленность */ > … /* и так до двадцатого блока с шагом 10% (увеличение осветленности)*/ .test20  background-color : hsl(0, 100%, 100%); /* как вы можете заметить осветленность 100% дает белый цвет */ >   class = "test1"> hsl(0, 10%, 50%) …/* и так до десятого блока */  class = "test10"> hsl(0, 100%, 50%) /* переводим строку */  class = "test11" style = "color:white">hsl(0, 100%, 10%) /* добавляем внутренний стиль для элемента (цвет текста белый) */ …/* и так до двадцатого блока */  class = "test10"> hsl(0, 100%, 100%)   

Результат нашего примера:

По аналогии с RGB, HSL поддерживает прозрачность с помощью добавления альфа канала, который задает уровень прозрачности со значениями от 0 до 1 (от невидимого до полностью непрозрачного).

Данный формат задания цвета в CSS называется HSLA, давайте рассмотрим его применение на примере фиолетового цвета (значение тона 300° ):

   charset = "UTF-8"> Применение HSLA в CSS div  display : inline-block; /* выстраиваем элементы в линейку, как строчные элементы */ width : 60px; /* устанавливаем ширину для всех элементов */ height : 60px; /* устанавливаем высоту для всех элементов */ > .test1  background-color : hsla(300, 100%, 50%,.1); /* фиолетовый цвет со 100% насыщенностью и 50% осветлённостью с добавлением альфа-канала, который задает уровень прозрачности */ > …/* и так до десятого блока с шагом 0.1 */ .test10  background-color : hsla(300, 100%, 50%, 1); /* альфа-канал полностью непрозрачный */ >   class = "test1">hsla(300, 100%, 50%,.1) …  class = "test10">hsla(300, 100%, 50%, 1)   

Результат нашего примера:

Предопределённые цвета

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

p.intro  color : gray; /* задаём серый цвет для всех абзацев с классом intro */ > i  color : orange; /* задаём оранжевый цвет для всех элементов */ > h2:first-child  color : red; /* задаём красный цвет для всех элементов , которые являются первыми дочерними элементами своего родителя */ > 

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

• Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:
  

• Составьте страницу на которой будут использованы три цвета: красный, черный и белый, при этом Вам необходимо при выполнении этого задания хотя бы один раз использовать в качестве значения цвета — предопределенный цвет, шестнадцетеричное значение и значение RGBA.

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

Работа со шрифтами в CSS
Единицы измерения CSS, размер шрифта

© 2016-2023 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу basicweb.ru@gmail.com

Кажется, вы используете блокировщик рекламы 🙁

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.