Html background color transparent

Html background color transparent

Поддержка браузерами

12.0+ 4.0+ 1.0+ 1.0+ 3.5+ 1.0+

Описание

CSS свойство background-color устанавливает цвет фона для элемента. Фон охватывает общий размер элемента, включая внутренние отступы и рамки (не распространяясь на внешний отступ — margin).

Обратите внимание, что по умолчанию фон не наследуется от родительского элемента, однако дочерние элементы, благодаря прозрачности своего фона (задано по умолчанию), будут содержать часть фона родительского элемента.

Цвет фона можно установить различными способами, к примеру: указать имя цвета, использовать шестнадцатеричные значения или с помощью синтаксиса RGB, как именно это сделать, вы можете увидеть в примере ниже, где показано применение различных способов задания цвета фона. Все доступные названия цветов, их шестнадцатеричные значения и визуальное отображение оттенка вы можете посмотреть в таблице цветов.

Примечание: если добавить свойство background-color к тегу , цвет заполнит все окно браузера. Однако если так же добавить цвет фона для тега , то фон элемента будет заполнять только область с содержимым, если оно есть.

Совет: вместо монотонного цвета, в качестве фона, можно использовать любое изображение, для этого стоит воспользоваться свойством background-image. Так же стоит обратить внимание на свойство background-clip, используемое для определения области в элементе, на которую будет распространяться фон.

Определение и применение

CSS свойство background-color определяет цвет фона элемента. Фон элемента представляет из себя общий размер элемента, включающий значения padding (внутренние отступы элемента) и border (границы), но не включая значение свойства margin (внешние отступы элемента). Значение цвета допускается указывать как в шестнадцатиричной системе, так и в системах RGB, RGBA, HSL, HSLA, так и с помощью предопределенных цветов.

Обращаю Ваше внимание, что допускается указать значение цвета заднего фона с использованием универсального свойства background.

Читайте также:  Amd radeon hd 7800 series температура

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

Поддержка браузерами

Свойство Chrome Firefox Opera Safari IExplorer Edge
background-color 1.0 1.0 3.5 1.0 4.0 12.0

Значения свойства

Значение Описание
color Определяет цвет фона (HEX, RGB, RGBA, HSL, HSLA, "Предопределённые цвета").
transparent Указывает, что цвет фона должен быть прозрачным. Значение по умолчанию.
initial Устанавливает свойство в значение по умолчанию.
inherit Указывает, что значение наследуется от родительского элемента.

Версия CSS

Наследуется

Анимируемое

Пример использования

В этом примере мы с использованием CSS свойства background-color указали цвет заднего фона для:

  • Элемента с использованием предопределенного цвета (CornflowerBlue).
  • Элемента

с использованием системы RGB (rgb(0,255,0) — зеленый).

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

Пример использования свойства background-color. CSS свойства

I want to make the list menu disappear by using opacity without affecting font. Is it possible with CSS3?

8 Answers 8

now you can use rgba in CSS properties like this:

0.5 is the transparency, change the values according to your design.

Keep these three options in mind (you want #3):

1) Whole element is transparent:

2) Whole element is somewhat transparent:

3) Just the background of the element is transparent:

yes, thats possible. just use the rgba-syntax for your background-color.

In this case background-color:rgba(0,0,0,0.5); is the best way. For example: background-color:rgba(0,0,0,opacity option);

Here is an example class using CSS named colors:

This adds a background that is 25% opaque (colored) and 75% transparent.

CAVEAT Unfortunately, opacity will affect then entire element it’s attached to.
So if you have text in that element, it will set the text to 25% opacity too. 🙁

Читайте также:  Асус zenfone max zc550kl

The way to get past this is to use the rgba or hsla methods to indicate transparency as part of your desired background "color". This allows you to specify the background transparency, independent from the transparency of the other items in your element.

Here are 3 ways to set a blue background at 75% transparency, without affecting other elements:

  • background: rgba(0%, 0%, 100%, 0.75)
  • background: rgba(0, 0, 255, 0.75)
  • background: hsla(240, 100%, 50%, 0.75)
Ссылка на основную публикацию
High speed hdmi cable with ethernet
Приветствую всех посетителей блога о компьютерах. Сегодня бы очень хотелось поведать читателям о так называемом HDMI кабеле, с помощью которого...
Freedom planet 2 дата выхода
Даты выхода Дата выхода - это та временная черта, после которой игра считается вышедшей, что обычно подразумевает, что ее уже...
Friday the 13th the game xbox one
Готовы ли вы столкнуться с бессмертным злом, ужасом во плоти? Тогда мультиплеерный ассиметричный экшен Friday the 13th: The Game для...
Highscreen pure j 4pda прошивка
Внимание! Использование инструментов для перепрошивки неопытными пользователями может привести к выходу аппарата из строя. Установка этого обновления приведет к полному...
Adblock detector