CSS background-image-opacity?

Связано с Как сделать текст или изображение прозрачным фоном с помощью CSS? , но немного иначе.

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

Пока лучшее, что у меня есть:

<div style="position: relative;">
    <div style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;
                      background-image: url(...); opacity: 0.5;"></div>
    <div style="position: relative; z-index: 1;">
        <!-- Rest of content here -->
    </div>
</div>

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

Если фон не должен повторяться, вы можете использовать технику спрайтов (раздвижные двери), когда вы помещаете все изображения с разной непрозрачностью в одно (рядом друг с другом), а затем просто перемещаете их с помощью background-position.

Или вы можете объявить одно и то же частично прозрачное фоновое изображение более одного раза, если ваш целевой браузер поддерживает несколько фонов (Firefox 3.6+, Safari 1.0+, Chrome 1.3+, Opera 10.5+, Internet Explorer 9+). Непрозрачность этих нескольких изображений должна складываться, чем больше фонов вы определяете.

Этот процесс объединения прозрачностей называется альфа-смешением и рассчитывается как (спасибо @IainFraser):

αᵣ = α₁ + α₂(1-α₁)где αнаходится в диапазоне от 0 до 1.

Вы можете сделать выцветший фон с помощью CSS Generated Content

Демо на http://jsfiddle.net/gaby/WktFm/508/

HTML

<div class="container">
        contents
</div>

CSS

.container{
    position: relative;
    z-index:1;
    overflow:hidden; /*if you want to crop the image*/
}
.container:before{
    z-index:-1;
    position:absolute;
    left:0;
    top:0;
    content: url('path/to/image.ext');
    opacity:0.4;
}

Но вы не можете изменить прозрачность, поскольку нам не разрешено изменять сгенерированный контент.

Вы можете манипулировать им с помощью классов и событий css ( но не уверен, соответствует ли он вашим потребностям )

например

.container:hover:before{
    opacity:1;
}

ОБНОВИТЬ

Вы можете использовать переходы css для анимации непрозрачности ( снова через классы )

демонстрация на http://jsfiddle.net/gaby/WktFm/507/

Добавление

-webkit-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;

к .container:beforeправилу сделает анимацию непрозрачности до 1 за одну секунду.

Совместимость

• FF 5 ( может быть, и 4, но он еще не установлен ).
• IE 9 не работает ..
• Браузеры на основе Webkit терпят неудачу ( Chrome теперь поддерживает v26 - возможно, и более ранние версии, но только что проверено с моей текущей сборкой ), но они знают и работают над этим ( https://bugs.webkit.org/show_bug.cgi?id= 23209 )

.. так что только последняя версия FF поддерживает его на данный момент .. но хорошая идея, не так ли? :)

.class {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
}

Скопировано с: http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

Попробуйте этот трюк .. используйте тень css с опцией (inset) и сделайте глубокий 200 пикселей например

Код:

box-shadow: inset 0px 0px 277px 3px #4c3f37;

.

Также для всех браузеров:

-moz-box-shadow: inset 0px 0px 47px 3px #4c3f37;
-webkit-box-shadow: inset 0px 0px 47px 3px #4c3f37;
box-shadow: inset 0px 0px 277px 3px #4c3f37;

и увеличивайте число, чтобы заполнить вашу коробку :)

Наслаждайтесь!

Вы можете поместить второй элемент внутрь элемента, на котором вы хотите иметь прозрачный фон.

<div class="container">
    <div class="container-background"></div>
    <div class="content">
         Yay, happy content!
    </div>
</div>

Затем сделайте '.container-background' абсолютно позиционированным, чтобы покрывать родительский элемент. На этом этапе вы сможете настроить его непрозрачность, не влияя на непрозрачность содержимого внутри '.container'.

.container {
    position: relative;
}
.container .container-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(background.png);
    opacity: 0.5;
}
.container .content {
    position: relative;
    z-index: 1;
}

Попробуй это

<div style="background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url(/image.png);background-repeat: no-repeat; background-position: center;"> </div>

Вы не можете редактировать изображение через CSS. Единственное решение, которое я могу придумать, - это отредактировать изображение и изменить его непрозрачность или создать другие изображения со всеми необходимыми значениями непрозрачности.

#id {
  position: relative;
  opacity: 0.99;
}

#id::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url('image.png');
  opacity: 0.3;
}

Взлом с непрозрачностью 0,99 (меньше 1) создает контекст z-индекса, поэтому вы можете не беспокоиться о глобальных значениях z-индекса. (Попробуйте удалить его и посмотрите, что произойдет в следующей демонстрации, где родительская оболочка имеет положительный z-индекс.)
Если у вашего элемента уже есть z-index, то этот прием вам не нужен.

Демо .

Вот еще один подход к настройке градиента и прозрачности с помощью CSS. Однако вам нужно немного поиграть с параметрами.

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, transparent)),url("gears.jpg"); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* Chrome10+,Safari5.1+ */
background-image:    -moz-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* FF3.6+ */
background-image:     -ms-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* IE10+ */
background-image:      -o-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* Opera 11.10+ */
background-image:         linear-gradient(to bottom, transparent, transparent),url("gears.jpg"); /* W3C */

body {
  ' css code that goes in your body'
}

body::after {
  background: url(yourfilename.jpg);
  content: "";
  opacity: 0.6;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1;   
  width:auto;
  height: 100%;
  }

Так сказать его тело :: после того, как вы ищете. Таким образом, код вашего тела не изменяется или изменяется только фон, где вы можете вносить изменения при необходимости.