CSS-hintergrund-Farbverlauf mit Bild-overlay

Wirklich nur kurz, bin ich habe ein wenig Probleme mit - das heißt, die Bestellung von hintergrund-css-Elemente.

Habe ich Folgendes:

background-color: #3C3E89; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#3C3E89, #6265E4); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#3C3E89, #6265E4); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#3C3E89, #6265E4); /* For Firefox 3.6 to 15 */
background: linear-gradient(#3C3E89, #6265E4); /* Standard syntax */
background-image: url('../images/logo.png');
background-size: cover;

Und für einige Grund, die png - obwohl es die Transparenz-layer - überschreibungen der linearen Verläufen, mit denen ich es gern zu sitzen.

Habe ich eine kleine Wurzel, um zu sehen, was die richtige Methode ist für diese, versuchte Sie, nicht mit Glück. Ich Frage mich, ob jemand hatte eine bewährte Methode für die überlagerung eines png auf der Spitze eines Gradienten hintergrund...

Ich bin sicher, jeder wird Schreien mich an sagen, das ist eine duplizierte Frage - aber es sei denn, ich bin fehlt etwas, was ich noch nicht in der Lage, um eine erfolgreiche Umsetzung Ihrer Vorschläge.

Update:

Ich habe auch versucht, die folgenden:

background-image:
  -webkit-linear-gradient(#3C3E89, #6265E4), /* For Safari 5.1 to 6.0 */
  -o-linear-gradient(#3C3E89, #6265E4), /* For Opera 11.1 to 12.0 */
  -moz-linear-gradient(#3C3E89, #6265E4), /* For Firefox 3.6 to 15 */
  linear-gradient(#3C3E89, #6265E4), /* Standard HTML Syntax */
  url('../images/logo.png');

Und...

background:
  -webkit-linear-gradient(#3C3E89, #6265E4), /* For Safari 5.1 to 6.0 */
  -o-linear-gradient(#3C3E89, #6265E4), /* For Opera 11.1 to 12.0 */
  -moz-linear-gradient(#3C3E89, #6265E4), /* For Firefox 3.6 to 15 */
  linear-gradient(#3C3E89, #6265E4), /* Standard HTML Syntax */
  url('../images/logo.png');
InformationsquelleAutor | 2017-10-29
  1. 6

    Du bist überschreiben hintergrund von Einstellung background-image. Stattdessen müssen Sie verwenden mehrere Hintergründe:

    background-image: url('../images/logo.png'), linear-gradient(#3C3E89, #6265E4);

    Laut Dokumentation Hintergründe sind gezeichnet vom nächsten zum am weitesten entfernten. Also in deinem Fall Bild sollten zuerst gezeichnet werden, der über den Verlauf.

    • Hmmm, nicht einfach das sage, aber ich habe dies ausprobiert...alles, was ich sehe, ist das linear-gradient? Kein Bild...
    • Sorry, das Bild sollte zuerst kam
    • Es bekam. Ich hatte auch zu entfernen Kompatibilität für verschiedene Browser... trotzdem kann ich behalten Sie diese ein?
    • ich schlage vor, Sie fügen Sie eine kleine Zeile geben Sie die Bedeutung der Reihenfolge, so dass Sie Antwort ist mehr komplett 😉
    • Hinzugefügte Erklärung mit link zu MDN-Dokumentation
    InformationsquelleAutor Flying
  2. 1

    lineare gradiant ist, verhält sich wie background-image wie Sie können, verwenden Sie diese syntax auch :

    CSS:

    .content {
  background-image: linear-gradient(#3C3E89, #6265E4);
  height:200px;
}

    HTML:

    <div class="content">
</div>

    Deshalb Ihren CSS-Regeln background-image überschreiben es. Stattdessen müssen Sie angeben, mehrere Hintergründe wie diese :

    CSS:

    .content {
  height: 200px;
  background: linear-gradient(#3C3E89, rgba(98, 101, 228, 0.21)), url(https://lorempixel.com/200/100/);
}

    HTML:

    <div class="content">
</div>

    Sollten Sie die Aufmerksamkeit auf um. In meinem Beispiel ist der Verlauf über das Bild, weil es kommt ersten und ich habe wieder einige "Deckkraft", um in der Lage sein zu sehen, das Bild. Wenn Sie Feste Farbe und/oder Bild ohne transaparency sehen Sie nur die ersten hintergrund.

    InformationsquelleAutor Temani Afif
Schreibe einen Kommentar