Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ ПРОГРАММЫ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

CSS Учебник


CSS Продвинутый


CSS Отзывчивый


CSS Grid


CSS SASS


CSS Примеры


CSS Справочники



CSS Цвета



CSS поддерживает 140 + названия цветов, HSL шестнадцатеричные значения, значения RGB, значения RGBA, значения HSL, значения HSLA и непрозрачность.


RGBA Цвета

RGBA значения цвета являются расширением значений цвета RGB с альфа каналом, который определяет непрозрачность для цвета.

Значение цвета RGBA указывается с помощью rgba (красный, зеленый, синий, альфа). Параметр alpha является числом между 0.0 (полностью прозрачный) и 1.0 (полностью непрозрачный).

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);

В следующем примере определяются различные цвета RGBA:

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* красный с непрозрачностью */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* зеленый с непрозрачностью */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* синий с непрозрачностью */
Попробуйте сами »

HSL Цвета

HSL означает Оттенок, Насыщенность и Яркости.

Цвет значения HSL указано: 0.0hsl(оттенок, насыщенность, яркость).

  1. Оттенок - это градус на цветовом круге (от 0 до 360):
    • 0 (или 360) красный
    • 120 зеленый
    • 240 синий
  2. Насыщенность - это процентное значение: 100% - полный цвет.
  3. Яркость - также в процентах; 0% - темный (черный) и 100% - белый.
hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

В следующем примере определяются различные цвета HSL:

#p1 {background-color: hsl(120, 100%, 50%);}  /* зеленый */
#p2 {background-color: hsl(120, 100%, 75%);}  /* светло зеленый */
#p3 {background-color: hsl(120, 100%, 25%);}  /* темно зеленый */
#p4 {background-color: hsl(120, 60%, 70%);}   /* ярко зеленый */
Попробуйте сами »

HSLA Цвета

Значения цвета HSLA являются расширением значений цвета HSL с альфа каналом, который определяет непрозрачность для цвета.

Значение цвета HSLA указывается с помощью: hsla (оттенок, насыщенность, яркость, альфа), где параметр alpha определяет непрозрачность. Параметр alpha - это число от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

В следующем примере определяются различные цвета HSLA:

#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* зеленый с непрозрачностью */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);};/* светло зеленый с непрозрачностью */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* темный зеленый с непрозрачностью */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}  /* ярко зеленый с непрозрачностью */
Попробуйте сами »

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

Свойство CSS opacity задает непрозрачность для всех элементов (как цвет фона и текста, будут матово/прозрачным).

Свойство значений opacity должно быть числом между 0.0 (полностью прозрачный) и 1.0 (полностью непрозрачный).

rgb(255, 0, 0);opacity:0.2;
rgb(255, 0, 0);opacity:0.4;
rgb(255, 0, 0);opacity:0.6;
rgb(255, 0, 0);opacity:0.8;

Обратите внимание, что текст выше также будет прозрачный / непрозрачный!

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

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* красный с непрозрачностью */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* зеленый с непрозрачность */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* синий с непрозрачностью */
Попробуйте сами »

CSS3 Упражнения

Проверьте себя с помощью упражнений

Вставьте значение цвета RGBA для полного красного цвета фона элемента <h1> без прозрачности.

<style>
h1 {
  background-color: ;
}
</style>

<body>
  <h1>Это заголовок</h1>
  <p>Это параграф</p>
  <p>Это параграф</p>
</body>



×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.