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

Как добавить прозрачность фону в css

  • автор:

Как наложить полупрозрачный фон на картинку 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; > 

Прозрачный фон на css: background

Прозрачный фон на css: background

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

1. Через свойство opacity

Способ не совсем правильный, но он будет отображаться во всех браузерах корректно.

Рассмотрим на примере двух блоков, у одного фон картинка, а у другого фон красный и с прозрачностью.

div < width: 300px; height: 300px; position: absolute; top: 0px; left: 0px; >#block1 < backgroun-image('image/image1.jpg'); >#block2 < backround-color: red; opacity: 0.7; // прозрачность >

Прозрачность измеряется в от 0 до 1. Естественно ноль — это полная прозрачность.

Задний фон на CSS

2. background-color: RGBA

Здесь тоже самое, только в одном свойстве мы указываем и цвет, и прозрачность.

background-color: rgba(0, 125, 215, 0.7);

Это современный подход, более простой, но не всех браузер отображается корректно.

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

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

Отслеживать

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

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

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

а использовать 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.

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

Я хотел бы показать как быстро сделать полупрозрачный фон. Если в 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 не будет опубликован. Обязательные поля помечены *