Ich habe ein reguläres Bild im Bild-Tag wie this:hinzufügen Farbton zu einem regelmäßigen Bild mit CSS

<img src="http://i.imgur.com/StEW4JD.jpg" class="image">

, die ich in diesen image machen will. Ich habe einige Beispiele für den Mischmodus gesehen, aber für den Mischmodus müssen Sie das Bild als Hintergrund einstellen, aber ich habe das Bild im Bild-Tag.

Kann der Farbton über css zum Bild hinzugefügt werden, ohne das Bild als Hintergrund zu setzen?

Quelle

2017-02-20 user7592255

ja, Sie können diese Art von Effekt nur mit 'CSS' erreichen. – vivekkupadhyay

Verwenden Sie ein Elternteil zu Ihrem Bild mit der gewünschten Hintergrundfarbe.
als gesetzt mix-blend-mode: overlay; auf Ihr Bild

img{max-width:100%;vertical-align:top;} 
 

 

 
.blend-overlay{ mix-blend-mode: overlay; }

<div style="background:#822;"> 
 
    <img class="blend-overlay" src="https://i.imgur.com/StEW4JD.jpg"> 
 
</div>

https://stackoverflow.com/a/31528825/383904

Quelle

2017-02-20 10:04:36

Beachten Sie, dass Mix-Blend-Modus nicht in allen Browsern unterstützt wird: http://caniuse.com/#search=mix-blend-mode –

@MarioPlantosar ja, danke –

Sie diese Art Bild suchen. Demo Link hier https://jsfiddle.net/JentiDabhi/9v96yfro/

HTML

<div class="image-box"> 
    <img src="http://i.imgur.com/StEW4JD.jpg" class="image"> 
</div>

CSS

.image-box { 
    position: relative; 
    display: inline-block; 
} 

div.image:after { 
    content: ""; 
    background: rgba(255, 0, 0, 0.4); 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

Quelle

2017-02-20 10:08:55

Sie verwenden die __. Image__ Klasse 2 zwei mal hier Dies könnte zu einem Problem mit dem vorhandenen Code führen. –

OK jetzt gut ich hatte Wechselklasse –

Eine Möglichkeit wäre, CSS-Filter zu verwenden (auf Bild) und CSS-Pseudoelement als Overlay. Aber das (Filter) wird nicht auf älteren IE-tho ...

img { 
 
    width: 100%; 
 
    -webkit-filter: grayscale(100%); 
 
      filter: grayscale(100%); 
 
} 
 

 
.image-wrapper { 
 
    width: 100%; 
 
    position: relative; 
 
} 
 

 
.image-wrapper::after { 
 
    content: ''; 
 
    display: inline-block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(255,0,0,.2); 
 
}

<div class="image-wrapper"> 
 
    <img src="http://i.imgur.com/StEW4JD.jpg" class="image"> 
 
</div>

Quelle

2017-02-20 10:42:02 VilleKoo

Ich schlage vor, werde mit CSS Filter

seine Browser-Unterstützung ist ziemlich gut mit -webkit- Präfix neben IE < 12.

https://jsfiddle.net/9v96yfro/2/

.image { 
    filter: sepia(100%) hue-rotate(300deg) brightness(75%) saturate(200%); 
}

Kurzer Rückblick auf was es tut: Es koloriert das Bild durch Anwenden eines Sepia-Effekts auf das Bild, wobei alle Farbinformationen aus dem Bild genommen werden und der Farbton der Farbe um 300 Grad in eine rötliche Farbe geändert wird. Sättigung und Helligkeit werden auf Ihr Beispielbild eingestellt.

Spielen Sie mit den Werten herum und passen Sie sie Ihren Wünschen an. Sie können mehr über CSS Filter at Mozilla Developer Network lesen

Quelle

2017-02-20 10:50:59

hinzufügen Farbton zu einem regelmäßigen Bild mit CSS

Antwort

Ich schlage vor, werde mit CSS Filter

Verwandte Themen