Непрозорість фонового зображення CSS?

Пов’язане з тим, як надати тексту чи зображенню прозорий фон за допомогою 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+). Непрозорість цих кількох зображень повинна складатися, чим більше фонів ви визначаєте.

Цей процес поєднання прозорих плівок називається Alpha Blending і обчислюється як (завдяки @IainFraser):

αᵣ = α₁ + α₂(1-α₁)де αколивається від 0 до 1.

Ви можете зробити зникле тло за допомогою вмісту, створеного 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 з опцією (вставка) і зробіть, наприклад, глибину 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-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-index, тому ви можете не турбуватися про глобальні значення z-index. (Спробуйте видалити його і подивіться, що станеться в наступній демонстрації, де батьківська обгортка має позитивний 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%;
  }

Так сказати його тіло :: після того, як ви шукаєте. Таким чином, код вашого тіла не змінюється або змінюється лише у фоновому режимі, де ви можете вносити зміни там, де це необхідно.