it-swarm.com.de

CSS-Hintergrundbild-Deckkraft?

Verwandt mit Wie gebe ich Text oder Bildern mit CSS einen transparenten Hintergrund? , aber etwas anders.

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

Das beste was ich je habe ist:

<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, aber es ist sperrig und hässlich und verwirrt die Dinge in komplizierteren Layouts.

64

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 eine (nebeneinander) setzen und sie dann einfach mit background-position verschieben.

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

16
DanMan

Sie können den verblassten 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;
}

UPDATE

Sie können CSS-Übergänge verwenden, um die Deckkraft zu animieren (wieder 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;

durch die .container:before-Regel 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 - vielleicht auch frühere Versionen, aber nur bei meinem aktuellen Build), aber sie sind sich dessen bewusst und arbeiten daran ( https: //bugs.webkit.) org/show_bug.cgi? id = 23209 )

.. also nur der neueste FF unterstützt es für den Moment .. aber eine schöne Idee, nein? :)

40
.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 aus: http://robertnyman.com/2010/01/11/css-background-transparency-ohne- beeinflussende-kinder-elemente-durch-rgba-und-filter/

24
Andy.Diaz

Probieren Sie diesen Trick aus. Verwenden Sie die Option css shadow mit (inset) und machen Sie beispielsweise 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, um Ihre Box füllen zu lassen :)

Genießen!

11
Saud Alfadhli

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-background' so ein, dass er das übergeordnete Element abdeckt. An dieser Stelle können Sie die Deckkraft anpassen, ohne die Deckkraft des Inhalts von '.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;
}
5
Alex K

Sie können das Bild nicht über CSS bearbeiten. Die einzige Lösung, die ich mir vorstellen kann, ist, das Bild zu bearbeiten und seine Deckkraft zu ändern oder verschiedene Bilder mit allen erforderlichen Deckkraften zu erstellen.

1
Cokegod
#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, wenn der übergeordnete Wrapper einen positiven Z-Index hat.)
Wenn Ihr Element bereits einen Z-Index hat, brauchen Sie diesen Hack nicht.

Demo .

1
user

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>

1
JM Causing

Hier ist ein weiterer Ansatz, um Gradienten und Transparenz mit CSS einzurichten. Sie müssen jedoch etwas mit den Parametern spielen.

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 */
0
Stanislav