Как сделать полупрозрачный фон css
Перейти к содержимому

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

  • автор:

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

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

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

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

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

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

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

См. также

  • background-color
  • Атрибут bgcolor
  • Единицы цвета в CSS
  • Фон в CSS
  • Функция rgba()
  • Цвет

Как наложить полупрозрачный фон на картинку css

На прозрачность элемента можно повлиять 2 способами: rgba() и opacity . Они между собой не взаимосвязаны, и по-разному влияют на элемент.

opacity — это свойство, которое определяет уровень прозрачности определенного элемента в целом. Значение непрозрачности варьируется от 0 до 1.

/* на весь элемент 30% opacity */ .сontent-opacity  background-color: rgb(0,0,0); opacity: 0.3; border: 10px solid blue; > 

rgba() — влияет на одно отдельное свойство выбранного элемента, например, background-color или border-color :

/* 30% прозрачность только для фонового цвета */ .сontent-opacity  background-color: rgb(0,0,0, 0.3); border: 10px solid blue; > 

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

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

Свойство opacity

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

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

0.1 0.4 0.8 1
opacity: 0.1 opacity: 0.4 opacity: 0.8 opacity: 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. Полупрозрачный фон

HTML5 CSS3 IE 9+ Cr Op Sa Fx

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

Результат данного примера показан на рис. 2. Значение непрозрачности для фона установлено 90%.

Полупрозрачный фон и непрозрачный текст

Рис. 2. Полупрозрачный фон и непрозрачный текст

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

Я хотел бы показать как быстро сделать полупрозрачный фон. Если в CSS использовать команду opacity, то фон конечно же станет прозрачным, но вместе с ним также и всё остальное что на нём находится.

Как же исправить эту проблему? Я порылся в Интернете и нашёл замечательный способ, о котором я вам сейчас и поведаю.

Допустим, это ваш сайт (html):

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

Ваш текст

Ваш текст. Ваш текст.

Строчка «» подключает файл стилей CSS.

Вот он (он называется style.css):

body < background: "Ваша картинка для фона" ; * background-attachment: fixed ; background-position: top center; >.mid

В классе mid 3 строчка задаёт цвет полупрозрачного цвета в формате RGBA. Её 4 цифра, в данном случае 0.5 — значение прозрачности от 0 до 1.

Вот так всё просто. Пробуйте, у вас обязательно всё получится!

* — вставляете сюда url картинки
** — задаём ширину страницы (для этого в html — коде мы создали class mid)
*** — rgba — это цвет в формате rgb. Последняя буква (a) означает прозрачность фона. Её значение — цифра от 0 до 1. 0 — полностью прозрачный фон, соответственно, 1 — наоборот.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *