这个问题在这里已有答案:
阴影过滤器被忽略。
我是初学者,所以也许我的语法不对?正确应用了灰度,所以我知道我正确地处理了图像。
img#mportrait{
-webkit-filter: drop-shadow(15px 0px 5px rgba(51, 51, 51, 0.9));
filter: drop-shadow(15px 0px 5px rgba(51, 51, 51, 0.9));
filter: grayscale(0.7);
}
页面检查的结果:https://imgur.com/a/kONGtC3
每个连续的过滤规则都会覆盖最后一个。所以你想要做的是将规则与之间的空格结合起来,在规则的前缀和非前缀版本中重复grayscale()
:
img#mportrait{
-webkit-filter: drop-shadow(15px 0px 5px rgba(51, 51, 51, 0.9)) grayscale(0.7);
filter: drop-shadow(15px 0px 5px rgba(51, 51, 51, 0.9)) grayscale(0.7);
}
grayscale()
仅适用于您的示例,因为在取消前面的规则后,它是唯一应用的规则。
阴影是它自己的属性,它是box-shadow: ____
。所以你的代码是:
img#mportrait{
-webkit-filter: drop-shadow(15px 0px 5px rgba(51, 51, 51, 0.9));
box-shadow: 15px 0px 5px rgba(51, 51, 51, 0.9);
filter: grayscale(0.7);
}
这是来自this MDN article和this W3Schools article。 希望能帮助到你。