[英]Image Grayscale CSS Effect
I want to reduce the brightness
of my image with CSS. 我想使用CSS降低图像的brightness
。
I'm using Mozilla Firefox and this is my code: 我正在使用Mozilla Firefox,这是我的代码:
-moz-filter: brightness(0.5);
filter: brightness(0.5);
Why is it not taking effect? 为什么没有生效?
img {
-webkit-filter: brightness(100%);
-moz-filter: brightness(100%);
filter: brightness(100%);
}
img:hover {
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
filter: brightness(50%);
}
It's all you need! 这就是您所需要的! I checked in Firefox and Chrome, code is working 我在Firefox和Chrome中签入,代码正在运行
jsfiddle-link jsfiddle-link
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
-moz-filter: brightness(100%);
filter: grayscale(100%);
}
img:hover {
-webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
-moz-filter: brightness(50%);
filter: grayscale(50%);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.