* *11, ama biraz farklı ile ilgili.

Mümkünse bir arka plan alfa değeri değiştirmek için olup olmadığını bilmek istiyorumresimsadece renk yerine. Anlaşılan o ki, sadece farklı alfa değerleri ile görüntü kurtarabilirim, ama alpha dinamik olarak ayarlamak mümkün olmak istiyorum.

Şimdiye kadar sahip olduğum en iyi

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

Çalışıyor ama hantal ve çirkin, ve işler daha karmaşık düzenleri bozuyor.

CSS tarafından Oluşturulan İçerik ile soluk arka plan yapabilirsiniz

http://jsfiddle.net/gaby/WktFm/508/ Demo

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

Ama oluşturulan içerik.. değiştirme iznimiz yok olarak değiştir opaklık edemiyor

Sınıflar ve css olaylarla olsa manipüle edebileceğini (ama emin sizin ihtiyaçlarınıza uygun değilse)

örneğin

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

GÜNCELLEME

Css geçişler opaklığı hareketlendirmek için kullanabilirsiniztekrar dersleri)

http://jsfiddle.net/gaby/WktFm/507/ demo

Ekleme

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

bir saniye içinde .container:before kural yapacak opaklık animasyon 1.

Uyumluluk

• ( . FF 5 ^em>4 belki de, ama yüklü değil.)
• IE 9.. Başarısız olur
• Tabanlı tarayıcılar başarısız y (Chrome artık v26 - belki de önceki sürümlerini de destekler, ama sadece benim şu anki yapı ile kontrol etti), ama farkında ve bunun üzerinde çalışıyoruz ( https://bugs.webkit.org/show_bug.cgi?id=23209 )

.. o yüzden sadece en son FF şu an için.. desteklerama güzel bir fikir, değil mi ? :)