Есть ли способ с CSS3, чтобы указать прозрачность фона изображения? - PullRequest
Новая
       33

Есть ли способ с CSS3, чтобы указать прозрачность фона изображения?

1 голос
/ 09 июля 2011

Я нашел background-color: rgba (), но это только указывает фон color's alpha.Есть ли что-то похожее для фона image , когда изображение указано с помощью CSS3 background-image ()?Если нет чистого решения CSS3, какой самый элегантный способ сделать это?

Ответы [ 3 ]

2 голосов
/ 09 июля 2011

Просто поместите контейнер того же размера сверху с фоновой заливкой вашего процента rgba белого.

т. 

html {
    background-image: url(blah.jpg);
}

body {
    background-color: rgba(255,255,255,0.5);
}

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

1 голос
/ 09 июля 2011 
div.gallery   {
   background-image: url(...........);
   filter :alpha(opacity=0.8);
   opacity : .8;
}

Любые дочерние элементы этого элемента наследуют его непрозрачность, если это проблема, сделайте то, что сказал JD Parsons.Свойство фильтра предназначено для IE.[пример изменен из CSS3 Visual Quickstart Guide]

1 голос
/ 09 июля 2011

Вы можете добавить div, единственная цель которого - быть фоном, и дать ему 

opacity: 0.5;

Затем укажите div div, который содержит ваш контент, расположенный поверх него.

...