Color input background

Color input background

Для того чтобы задать цвет фона какого либо элемента или всего HTML-документа в CSS предусмотрено свойство background-color параметрами которого являются цвета, в формате шестнадцатеричного кода, форматов RGB, RGBA, HSL, HSLA и других стандартных значений.

  background-color: black;  background-color: #006699;  background-color: rgb(249, 201, 16);  background-color: rgba(163, 110, 29, 0.8);  background-color: hsl(212, 56%, 31%);  background-color: hsla(129, 60%, 19%, 0.8);  background-color: transparent;  background-color: inherit;    

 

black – имя цвета.

#006699 – Шестнадцатеричный код. При такой записи формата цвета перед числами обязательно ставится решетка #. Запись так же можно делать сокращённой – #069.

rgb (249, 201, 16) – Аддитивное смешение цветов.

Аббревиатура RGB расшифровывается как: Red, Green, Blue, что в переводе с английского означает – красный, зелёный, синий. Цифры, записанные в скобках через запятую, указывают на величину цветового потока ( в данном случае 249 единиц – красный, 201 – зелёный, 16 – синий ).

rgba(163, 110, 29, 0.8) – Аддитивное смешение цветов с добавленным альфа-каналом регулирующим прозрачность.

Аббревиатура RGBA расшифровывается как: Red, Green, Blue, Alpha. Все параметры кроме прозрачности аналогичны RGB. При выборе значения прозрачности равным 0.5, элемент становится полупрозрачным, 0 делает объект полностью прозрачным, а 1 отменяет прозрачность.

hsl(212, 56%, 31%) – формат HSLHue (оттенок), Saturation(насыщенность), Lightness(осветление). Значение 212 – оттенок в градусах ( 0360 ), 56% – насыщенность, 31% – осветление.

hsla(129, 60%, 19%, 0.8) – формат цвета HSLAHue, Saturation, Lightness, Alpha(альфа-канал). Цветовое значение в формате HSLA аналогично HSL, но с добавлением регулировки прозрачности как в RGBA.

transparent – прозрачный фон.

inherit – наследование.

Как задать цвет фона в CSS

  HTML    <div class="four-columns">      <div class="column">      <div class="box white">        white      </div>    </div>        <div class="column">      <div class="box silver">        silver      </div>    </div>        <div class="column">      <div class="box gray hue">        gray      </div>    </div>        <div class="column">      <div class="box black hue">        black      </div>    </div>    </div>       
  CSS    .four-columns{      overflow: hidden;  }  .four-columns .column {      width: 25%;      float: left;  }  .box{      width: 140px;      font-size: 22px;      font-weight: bold;      line-height: 50px;      margin: 20px auto;      text-align: center;  }  .hue{      color: rgba(255, 255, 255, 0.9);  }      .white{      background-color: white;  }  .silver{      background-color: silver;  }  .gray{      background-color: gray;  }  .black{      background-color: black;	  }    



Источник: code-pattern.ru


Добавить комментарий