Wie blenden Sie die hintergrund-Bild, schwarz mit CSS?

Ich möchte ein hintergrund-Bild, das nicht wiederholt. Wenn das Bild beendet ist, sollte es leise fade to black.

Hier ist ein Beispiel, was ich meine, nur findet das "soft-fading". Endet das Bild abrupt und es ist schwarz, ich würde gern diesen übergang glatter. Ist das möglich?

(Bild zufällig aufgenommen von google)

body {
    background:url(http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png) #000 no-repeat;
}

Live-Demo: http://jsfiddle.net/sMc8a/

InformationsquelleAutor user2015253 | 2013-09-01

  1. 4

    Können Sie versuchen, mit diesem code. http://jsfiddle.net/sMc8a/3/

    HTML

    <div class="example">
    Hello
</div>

    CSS

    body {
  background: black;
}
.example {
  width: 300px;
  height: 300px;
  background-image: -webkit-linear-gradient(top, 
      rgba(0,0,0,0.9) 0%, 
      rgba(0,0,0,0) 20%,
      rgba(0,0,0,0) 80%,
      rgba(0,0,0,0.9) 100%
    ),
    -webkit-linear-gradient(left, 
      rgba(0,0,0,0.9) 0%, 
      rgba(0,0,0,0) 20%,
      rgba(0,0,0,0) 80%,
      rgba(0,0,0,0.9) 100%
    ),
    url(http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png);

  background-image: -moz-linear-gradient(top, 
      rgba(0,0,0,0.9) 0%, 
      rgba(0,0,0,0) 20%,
      rgba(0,0,0,0) 80%,
      rgba(0,0,0,0.9) 100%
    ),
    -moz-linear-gradient(left, 
      rgba(0,0,0,0.9) 0%, 
      rgba(0,0,0,0) 20%,
      rgba(0,0,0,0) 80%,
      rgba(0,0,0,0.9) 100%
    ),
    url(http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png);

  background-image: -o-linear-gradient(top, 
      rgba(0,0,0,0.9) 0%, 
      rgba(0,0,0,0) 20%,
      rgba(0,0,0,0) 80%,
      rgba(0,0,0,0.9) 100%
    ),
    -o-linear-gradient(left, 
      rgba(0,0,0,0.9) 0%, 
      rgba(0,0,0,0) 20%,
      rgba(0,0,0,0) 80%,
      rgba(0,0,0,0.9) 100%
    ),
    url(http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png);

  background-image: linear-gradient(top, 
      rgba(0,0,0,0.9) 0%, 
      rgba(0,0,0,0) 20%,
      rgba(0,0,0,0) 80%,
      rgba(0,0,0,0.9) 100%
    ),
    linear-gradient(left, 
      rgba(0,0,0,0.9) 0%, 
      rgba(0,0,0,0) 20%,
      rgba(0,0,0,0) 80%,
      rgba(0,0,0,0.9) 100%
    ),
    url(http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png);
}
    Sie könnten aufhören, zu hassen, zu liefern eine bessere Antwort zu.
    Das funktioniert nicht, getestet in Firefox 24. Ich versuchte, entfernen Sie die "-webkit -" - Prefixe, noch nicht funktionsfähig.
    Ok, ich gebe ein Update, nur ein moment
    Ok Update mit code und link
    Danke, ich kann mit dieser arbeiten von diesem Punkt 🙂

    InformationsquelleAutor derek_duncan

  2. 4

    Dies funktioniert in allen großen Browsern, testen Sie es aus!

    Demo hier.

    .background {
background-image: -webkit-linear-gradient(rgba(0,0,0, 0) 0%,rgba(0,0,0, 1) 100%), url(http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png);
background-image:  -moz-linear-gradient(rgba(0,0,0, 0) 0%,rgba(0,0,0, 1) 100%), url(http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png);
background-image:  -o-linear-gradient(rgba(0,0,0, 0) 0%,rgba(0,0,0, 1) 100%), url(http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png);
background-image:  -ms-linear-gradient(rgba(0,0,0, 0) 0%,rgba(0,0,0, 1) 100%), url(http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png);
background-image:  linear-gradient(rgba(0,0,0, 0) 0%,rgba(0,0,0, 1) 100%), url(http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png);
}

    Ich enthalten der -ms - Präfix.. Aber ich denke nicht wirklich, dass es notwendig ist.

    Wie gesagt das funktioniert nur in den gängigen Browsern.. also fügen Sie einen fallback, wie:

    background: url('http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png');
    Die neuesten Versionen aller wichtigen Browser unterstützen die standard-syntax. IE9 nicht verstehen, Verläufe, auch mit dem Präfix, so dass Sie nicht alles gewinnen.
    Was ich damit sagen will ist, die vendor-Präfixe sind nicht erforderlich, von einem der großen Browser mehr. Sie konnte loszuwerden, die anderen 4 Linien und verringern das CSS nur für die standard -linear-gradient, und nur die wie 3 Leute noch die alte Versionen von FF oder Opera würde das je bemerken. (Ich benutze nie die Präfixe sowieso, aus dem gleichen Grund ich don ' T verwenden Sie bedingte Kommentare oder JavaScript-nicht-ECMAScript-Funktionen.) Würden Sie müssen nur einen einzigen hintergrund als fallback, als Sie gesprochen haben.

    InformationsquelleAutor Josh Crozier

Schreibe einen Kommentar