如何在滑块图像上应用深蓝色滤镜
问题描述:
我正在尝试制作深蓝色滤镜已经有几个小时了!因此,不仅是“灰度”使用或亮度过滤器。 我听说过SVG,并试图了解如何在这种情况下使用它,但我甚至不知道SVG是否适用于我的情况,尝试了所有这些webkit过滤器,并过滤了属性,而且我真的不能得到那个深蓝色的过滤器如何在滑块图像上应用深蓝色滤镜
而且在谷歌我无法找到如何使一个深蓝色的过滤器,或其它自定义过滤器
我只能通过编辑图像,不过我真的需要使它CSS,JS什么的。
我告诉你结果想:
如果有人可以帮助我,给一些想法,或者一些代码,以帮助这将是非常好
在此先感谢您的帮助!
答
这可以在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>
答
您需要使用包装
<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>
答
来到的<canvas>
世界,这个任务将变得轻而易举。例如。 FarbicJS会给你很多的过滤器,但一定要定制你的库,所以它不会太大。或从其他许多人中选择here on github。
我觉得这个看起来不太好:https://www.viget.com/articles/instagram-style-filters-in-html5-canvas
答
使用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>
https://codepen.io/mullany/pen/qJCDk –