CSS Hintergrundbild-Opazität?

Im Zusammenhang mit Wie gebe ich Text oder Bild mithilfe von CSS einen transparenten Hintergrund? , aber etwas anders.

Ich würde gerne wissen , ob es möglich ist, den Alpha - Wert eines Hintergrunds ändern Bildes , anstatt nur die Farbe. Natürlich kann ich das Bild nur mit verschiedenen Alpha-Werten speichern, aber ich möchte das Alpha dynamisch anpassen können.

Bisher ist das Beste, was ich habe ,:

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

Es funktioniert, ist aber sperrig und hässlich und bringt die Dinge in komplizierteren Layouts durcheinander.

Wenn sich der Hintergrund nicht wiederholen muss, können Sie die Sprite-Technik (Schiebetüren) verwenden, bei der Sie alle Bilder mit unterschiedlicher Deckkraft in eines (nebeneinander) einfügen und sie dann einfach mit verschieben background-position.

Sie können dasselbe teilweise transparente Hintergrundbild auch mehrmals deklarieren, wenn Ihr Zielbrowser mehrere Hintergründe unterstützt (Firefox 3.6+, Safari 1.0+, Chrome 1.3+, Opera 10.5+, Internet Explorer 9+). Die Deckkraft dieser mehreren Bilder sollte sich summieren, je mehr Hintergründe Sie definieren.

Sie können den ausgeblendeten Hintergrund mit CSS-generierten Inhalten erstellen

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

Sie können die Deckkraft jedoch nicht ändern, da wir den generierten Inhalt nicht ändern dürfen.

Sie können es zwar mit Klassen und CSS-Ereignissen bearbeiten ( aber nicht sicher, ob es Ihren Anforderungen entspricht ).

zum Beispiel

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

AKTUALISIEREN

Sie können CSS-Übergänge verwenden, um die Deckkraft zu animieren ( erneut durch Klassen ).

Demo unter http://jsfiddle.net/gaby/WktFm/507/

Hinzufügen

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

Nach der .container:beforeRegel wird die Deckkraft in einer Sekunde auf 1 animiert.

Kompatibilität

• FF 5 ( vielleicht auch 4, aber nicht installiert. )
• IE 9 schlägt fehl ..
• Webkit-basierte Browser schlagen fehl ( Chrome unterstützt es jetzt v26 - möglicherweise auch frühere Versionen, aber nur mit meinem aktuellen Build überprüft ), aber sie sind sich dessen bewusst und arbeiten daran ( https://bugs.webkit.org/show_bug.cgi?id=) 23209 )

.. also unterstützt es momentan nur der neueste FF .. aber eine nette Idee, nein? :) :)

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

Kopiert von: http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

Versuchen Sie diesen Trick. Verwenden Sie CSS-Schatten mit der Option (Einschub) und machen Sie zum Beispiel die tiefen 200px

Code:

box-shadow: inset 0px 0px 277px 3px #4c3f37;

.

Auch für alle Browser:

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

und erhöhen Sie die Anzahl, damit Ihre Box gefüllt wird :)

Genießen!

Sie können ein zweites Element in das Element einfügen, auf dem Sie einen transparenten Hintergrund haben möchten.

<div class="container">
    <div class="container-background"></div>
    <div class="content">
         Yay, happy content!
    </div>
</div>

Stellen Sie dann den '.container-Hintergrund' so ein, dass er das übergeordnete Element abdeckt. An diesem Punkt können Sie die Deckkraft anpassen, ohne die Deckkraft des Inhalts in '.container' zu beeinflussen.

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

Versuche dies

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

Sie können das Bild nicht über CSS bearbeiten. Die einzige Lösung, die mir einfällt, besteht darin, das Bild zu bearbeiten und seine Deckkraft zu ändern oder verschiedene Bilder mit allen erforderlichen Deckkraft zu erstellen.

#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 mit einer Deckkraft von 0,99 (weniger als 1) erstellt einen Z-Index-Kontext, sodass Sie sich keine Gedanken über globale Z-Index-Werte machen müssen. (Versuchen Sie, es zu entfernen und sehen Sie, was in der nächsten Demo passiert, in der der übergeordnete Wrapper einen positiven Z-Index hat.)
Wenn Ihr Element bereits einen Z-Index hat, benötigen Sie diesen Hack nicht.

Demo .

Hier ist ein weiterer Ansatz zum Einrichten von Gradient und Transparenz mit CSS. Sie müssen jedoch ein wenig mit den Parametern herumspielen.

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

Sozusagen ist es der Körper :: nachdem Sie gesucht haben. Auf diese Weise wird der Code für Ihren Körper nicht oder nur der Hintergrund geändert, auf dem Sie bei Bedarf Änderungen vornehmen können.