Как сделать полупрозрачный фон в html

Сделать прозрачным только фон

И получается, что он становится полупрозрачный, но и вместе с этим все, что находится в этом стиле, становится тоже полупрозрачным!

Отслеживать

68k 218 218 золотых знаков 79 79 серебряных знаков 221 221 бронзовый знак

задан 5 окт 2015 в 16:20

2,124 4 4 золотых знака 32 32 серебряных знака 84 84 бронзовых знака

а использовать background: rgba — ?

5 окт 2015 в 16:33

@soledar10 так в вопросе картинка фоном идет

5 окт 2015 в 16:34

@korytoff не заметил

5 окт 2015 в 16:39

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Добавить ещё один div. И изменить его z-index, чтобы держался, как фон.

.wrapper < position: relative; z-index: 1; padding: 1px; margin-left: 40px; margin-right: 40px; margin-top: 20px; border-radius: 6px; >.bg < position: absolute; z-index: -1; width: 100%; height: 100%; background: url("http://placekitten.com/g/800/600") center; opacity: .4; >

 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

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

Для создания цветного фона разной степени прозрачности применяется свойство background или background-color, в качестве значения указывается функция rgba() , в которой цвет задаётся четырьмя параметрами: красная, зелёная, синяя составляющая цвета и уровень прозрачности. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.

Чтобы полупрозрачность элемента была заметна, под него следует подложить фоновую картинку. В примере 1 для веб-страницы установлено фиксированное фоновое изображение и добавлен с классом overlay , для которого задан белый фон с уровнем прозрачности 0.8.

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

Результат данного примера показан на рис. 1.

Полупрозрачный блок

Рис. 1. Полупрозрачный блок

См. также

background-color
Атрибут bgcolor
Единицы цвета в CSS
Фон в CSS
Цвет

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

Сделать блочный элемент со всем его содержимым полупрозрачным.

Решение

Для изменения степени прозрачности элемента применяется стилевое свойство opacity со значением от 0 до 1, где 0 соответствует полной прозрачности, а 1, наоборот, непрозрачности объекта. В браузере Internet Explorer это свойство не работает, поэтому специально для него приходится использовать filter , свойство, не входящее в спецификацию CSS. В примере 1 показано, как установить прозрачность слоя для всех браузеров.

Пример 1. Полупрозрачный слой

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Полупрозрачный слой

Результат данного примера показан на рис. 1.

Полупрозрачный слой в браузере Safari

Рис. 1. Полупрозрачный слой в браузере Safari

Свойство filter добавляет прозрачность только для тех элементов, где установлен хотя бы один из размеров ( width или height ) или для элемента задано абсолютное позиционирование ( position : absolute ).

Также учтите, что прозрачность действует на всё содержимое слоя, включая дочерние элементы, и увеличить для них уровень непрозрачности за счет варьирования opacity не получится. В примере 1, где прозрачность слоя установлена как 0.7 , текст внутри слоя получает такое же значение. Его допустимо установить меньше, но превысить значение прозрачности 0.7 текст уже не может.

Полупрозрачный фон

Эффект полупрозрачности элемента хорошо заметен на фоновом рисунке и получил распространении в разных операционных системах, потому что смотрится стильно и красиво. В веб-дизайне полупрозрачность также применяется и достигается за счёт свойства opacity или формата цвета RGBA, который задаётся для фона.

Свойство opacity

Основная особенность этого свойства состоит в том, что значение прозрачности действует на все дочерние элементы внутри, а не только на фон. Это значит, что и фон и текст станут полупрозрачными и увеличить уровень прозрачности, добавляя opacity: 1 , не получится. В табл. 1 показан вид текста и фона с разными значениями opacity .

Табл. 1. Вид блока в зависимости от значения opacity

0.1	0.4	0.8	1

В примере 1 показано создание полупрозрачного блока с использованием opacity .

Пример 1. Фон на веб-странице

HTML5 CSS3 IE 9+ Cr Op Sa Fx

    opacity   Гоббс одним из первых осветил эту проблему с позиций психологии.

RGBA

Обычно по дизайну полупрозрачным должен быть только фон элемента, а текст непрозрачным для сохранения его читабельности. Свойство opacity здесь не подходит, потому что текст внутри элемента также будет частично прозрачным. Лучше всего использовать формат RGBA, частью которого является альфа-канал или иными словами значение прозрачности. В качестве значения пишется rgba , затем в скобках через запятую перечисляются значения красной, синей и зелёной компоненты цвета. Последним идёт прозрачность, которая задаётся от 0 до 1 (рис. 1), при этом 0 означает полную прозрачность, а 1 непрозрачность цвета..

Синтаксис применения rgba

Рис. 1. Синтаксис применения rgba

В примере 2 показано применение формата RGBA для создания полупрозрачного фона.

Пример 2. Полупрозрачный фон