Hintergrundbild und komplexe Gradienten auf Chrome Mobile

Nach this answer, sollten diese Arbeit:Hintergrundbild und komplexe Gradienten auf Chrome Mobile

#shop { 
    background-image: url('../images/tilecovers/shop.jpg'), 
    linear-gradient(
      135deg, 
      rgba(228,245,252,0.18) 0%, 
      rgba(191,232,249,0.2) 49%, 
      rgba(191,232,249,0.21) 65%, 
      rgba(159,216,239,0.21) 73%, 
      rgba(82,189,236,0.22) 100%); 
}

Es ist allerdings nicht funktioniert, nur das Bild sichtbar ist.

Nach ein paar Aktualisierungen bemerkte ich, dass zuerst der Farbverlauf geladen wurde, dann das Bild oben. Wie kann ich den transluzenten Verlauf über dem Hintergrundbild machen?

Quelle

2017-06-14 Scott Beeson

Nicht sicher cross browser support aber eine Option ist mit der background-blend-mode Eigenschaft wie folgt:

.shop { 
 
    background-image: url('https://placeholdit.co//i/500x250?bg=111111'), 
 
linear-gradient(
 
     135deg, 
 
     rgba(228,245,252,0.18) 0%, 
 
     rgba(191,232,249,0.2) 49%, 
 
     rgba(191,232,249,0.21) 65%, 
 
     rgba(159,216,239,0.21) 73%, 
 
     rgba(82,189,236,0.22) 100%); 
 
    background-blend-mode: overlay; 
 
    width: 500px; 
 
    height: 250px; 
 
} 
 

 
.shop-no-gradient { 
 
    background-image: url('https://placeholdit.co//i/500x250?bg=111111'); 
 
    width: 500px; 
 
    height: 250px; 
 
}

<div class="shop"></div> 
 
<br> 
 
<div class="shop-no-gradient"></div>

Quelle

2017-06-14 15:52:25

Das funktionierte sogar mit meinen dynamisch großen Elementen. Vielen Dank! –

Ich habe vielleicht ein Problem damit gefunden. Selbst wenn ich meinen Farbverlauf auf eine Deckkraft von 1 setze, kann man immer noch das Bild dahinter sehen. Gibt es einen Weg dahin? –

funktioniert es genau wie Ebenen in Photoshop. Wenn Ihr Farbverlauf undurchsichtig ist und Sie "Overlay" verwenden, werden Sie das Bild nicht sehen, da ein 100% opaker Verlauf darüber liegt. Es hängt wirklich davon ab, mit welchen Farben Sie arbeiten. Sehen Sie sich die Optionen an, die für die Unterkunft verfügbar sind, und versuchen Sie herauszufinden, was am besten zu Ihren Bedürfnissen passt - https://www.w3schools.com/cssref/pr_background-blend-mode.asp –

Verwenden Sie :before, um den Filter anzuwenden. Wie so:

#shop { 
 
    width: 350px; 
 
    height: 150px; 
 
    background: url("http://via.placeholder.com/350x150") center center no-repeat; 
 
} 
 
#shop:before { 
 
    width: 350px; 
 
    height: 150px; 
 
    content: ''; 
 
    position: absolute; 
 
    background-image: linear-gradient( 
 
     135deg, 
 
      rgba(228,245,252,0.18) 0%, 
 
      rgba(191,232,249,0.2) 49%, 
 
      rgba(191,232,249,0.21) 65%, 
 
      rgba(159,216,239,0.21) 73%, 
 
      rgba(82,189,236,0.22) 100% 
 
); 
 
}

<div id="shop"> 
 
</div>

Quelle

2017-06-14 15:36:51

Offensichtlich ist dies funktioniert, aber es funktioniert nicht für mich. Der einzige Unterschied ist, dass mein Element über Javascript skaliert wird und nicht statisch in der CSS Größe. Könnte das das Problem sein? –

Hintergrundbild und komplexe Gradienten auf Chrome Mobile

Antwort

Verwandte Themen