CSS фон-изображение-непрозрачность?

вы можете сделать выцветший фон с CSS генерируемого контента

демо на 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 shadow с опцией (inset) и сделайте глубокий 200px например

код:

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 {
    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;
}

вы не можете редактировать изображение с помощью 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;
}

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

демо.

вот еще один подход к настройке градиента и stransparency с помощью 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%;
  }

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