CSS background-image-opacity?

Question

Относится к Как дать тексту или изображению прозрачный фон с помощью 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>

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

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

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 Fails ..
• Браузеры на основе Webkit не работают ( Chrome поддерживает его сейчас v26 - возможно, и более ранние версии, но только что проверил с моей текущей сборкой ), но они знают и работают над этим (https://bugs.webkit.org/show_bug.cgi?id=23209)

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

Answer 2

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

Answer 3

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

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

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

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

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

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

Answer 6

Попробуйте это

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

Answer 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-index, поэтому вы можете не беспокоиться о глобальных значениях z-index.(Попробуйте удалить его и посмотрите, что произойдет в следующей демонстрации, где родительская обертка имеет положительный z-индекс.)
Если у вашего элемента уже есть z-индекс, этот хак вам не нужен.

Демо .

Answer 8

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

Answer 9

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

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

Answer 10

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