Wie man einen dunkelblauen Filter auf ein Schieberegler Bild anwendet

Question

Ich versuche schon für ein paar Stunden einen dunkelblauen Filter zu machen! Also nicht nur ein "Graustufen" -Bildschirm oder Helligkeitsfilter. Ich habe von SVG gehört und versucht zu verstehen, wie man es in diesem Fall verwendet, aber ich weiß nicht einmal, ob SVG in meinem Fall funktioniert, alle Webkit-Filter ausprobiert und Eigenschaften filtert, und das kann ich wirklich nicht erhalten, die dunkelblauen Filter

und auf google konnte ich nicht finden, wie einen dunkelblauen Filter zu machen, oder andere benutzerdefinierte Filter

ich bearbeite das Bild selbst nur kann, aber ich es wirklich brauchen, um mit CSS, JS oder so.

zeige ich Ihnen das Ergebnis wollte:

Bild ohne Filter

Bild mit Filter

Wenn jemand mir helfen könnte, indem sie einige Ideen oder einen Code zu geben, ihm zu helfen wäre sehr nett

Vielen Dank im Voraus für Ihre Hilfe!

Answer 1

Dies kann in CSS erreicht werden, ein Ansatz besteht darin, eine pseudoelement auf dem Bildcontainer zu verwenden.

Geben Sie der pseudoelement die Hintergrundfarbe, die Sie möchten, und legen Sie eine opacity. Sie können rgba hier stattdessen verwenden, wenn Sie möchten.

div { 
 
    width: 500px; 
 
    position: relative; 
 
} 
 

 
img { 
 
    width: 100%; 
 
    height: auto; 
 
    vertical-align: bottom; 
 
} 
 

 
div:after { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    content: ''; 
 
    background: darkblue; 
 
    opacity: .4; 
 
}

<div> 
 
    <img src="https://i.stack.imgur.com/45yOV.jpg"> 
 
</div>

Answer 2

Sie benötigen

<style> 
    #Wrapper{ 
     background:url(http://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg); 
     width:1300px; 
     height:1300px; 
    } 

    #Content{ 
     background-color:rgba(74, 136, 209,0.7); 
     width:100%; 
     height:100%; 
    } 
</style> 
<div id="Wrapper"> 
    <div id="Content"> 

    </div> 
</div> 

Answer 3

in die Welt der <canvas> Kommen Sie einen Wrapper verwenden und diese Aufgabe wird ein Kinderspiel. Z.B. wird Ihnen eine Menge Filter geben, aber stellen Sie sicher, dass Sie Ihre lib so anpassen, dass sie nicht zu groß wird. Oder wählen Sie aus vielen anderen here on github.

Ich denke, das man auch gut aussieht: https://www.viget.com/articles/instagram-style-filters-in-html5-canvas

Answer 4

eine Kombination von CSS filter properies Verwenden ... contrast und brightness scheinen recht gut zu funktionieren.

div { 
 
    width: 80%; 
 
    margin: 1em auto; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
    height: auto; 
 
    filter: contrast(45%) brightness(95%) 
 
}

<div> 
 
    <img src="https://i.stack.imgur.com/45yOV.jpg" alt=""> 
 
</div>