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>

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

Ответ 1

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

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

Ответ 2

Вы можете сделать выцветший фон с 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;
}

UPDATE

Вы можете использовать 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 поддерживает его на данный момент.. но хорошая идея, нет?:)

Ответ 3

.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/

Ответ 4

Попробуйте этот трюк. Используйте css shadow с (вставка) и сделайте глубокий 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;

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

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

Ответ 5

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

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

Ответ 6

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

Ответ 7

#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-индекс, вам не нужен этот хак.

Демо.

Ответ 8

Вот еще один подход к настройке градиента и непрозрачности с помощью 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 */

Ответ 9

Попробуй это

<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>

Ответ 10

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

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