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

Question

[Niko Frost]

Как сделать фон полупрозрачным?
Что бы была фотография и на ней был наложен цвет или градиент.
Собственно вот код:

background: linear-gradient(to top left, #bb4343, #efab4b);

Хочу что бы под ней была фотография.

Answer 1

[Денис Инешин]

Если нужно сделать прозрачным целый блок: opacity: 0.5
Если нужно сделать прозрачным только цвет, то rgba, вместо #000 -> rgba(0, 0, 0, 0.5) - последняя цифра отвечает за прозрачность:

linear-gradient(to top left, rgba(187, 67, 67, 0.5), rgba(239, 171, 75, 0.5));

Comments

[Niko Frost]

Ну я так делал, но потом градиент перекрывал фотографию. И прозрачность применялась к градиенту. Когда я убирал градиент то потом применялась к фотографии. Вот как-то так.

[Денис Инешин]

Niko Frost: Если использовать opacity то нужно использовать вложенные блоки.

[Niko Frost]

Хорошо, спасибо. Сейчас буду тестить)

[Денис Инешин]

Niko Frost: jsfiddle.net/9rqwzpgd

[Niko Frost]

О отлично то что нужно. А возможно ли добавить эту фотографию в CSS? Без утери результата.

[Денис Инешин]

Niko Frost: да, вместо img в background-image тому же блоку.

Answer 2

[ummahusla]

www.w3schools.com/css/tryit.asp?filename=trycss3_g...
stackoverflow.com/questions/2293910/css3-transpare...