如何在滑塊圖像上應用深藍色濾鏡

Question

我正在嘗試製作深藍色濾鏡已經有幾個小時了！因此，不僅是「灰度」使用或亮度過濾器。 我聽說過SVG，並試圖瞭解如何在這種情況下使用它，但我甚至不知道SVG是否適用於我的情況，嘗試了所有這些webkit過濾器，並過濾了屬性，而且我真的不能得到那個深藍色的過濾器

而且在谷歌我無法找到如何使一個深藍色的過濾器，或其它自定義過濾器

我只能通過編輯圖像，不過我真的需要使它CSS，JS什麼的。

我告訴你結果想：

圖像不帶過濾器

圖像的過濾器

如果有人可以幫助我，給一些想法，或者一些代碼，以幫助這將是非常好

在此先感謝您的幫助！

Answer 1

這可以在css中實現，一種方法是在圖像容器上使用pseudoelement。

爲pseudoelement指定所需的背景顏色，並設置opacity。如果您喜歡，您可以在這裏使用rgba。

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

您需要使用包裝

<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

來到的<canvas>世界，這個任務將變得輕而易舉。例如。 FarbicJS會給你很多的過濾器，但一定要定製你的庫，所以它不會太大。或從其他許多人中選擇here on github。

我覺得這個看起來不太好：https://www.viget.com/articles/instagram-style-filters-in-html5-canvas

Answer 4

使用CSS filter性的判定... contrast和brightness的組合似乎工作得很好。

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>