Html background color transparent

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

Описание

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

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

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

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

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

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

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

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

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

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

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

Версия 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. 🙁

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)