在 Internet Explorer 10 中应用灰度滤镜
Internet Explorer 10 对使用传统 CSS 方法应用灰度滤镜提出了挑战。与以前版本的 IE 不同,不再支持 DX 滤镜和前缀灰度滤镜。
解决方案:SVG 叠加
要在 IE10 中对图像进行灰度化,您可以使用 SVG覆盖。这涉及使用带有将图像转换为灰度的矩阵的 SVG 滤镜。
CSS 代码:
<code class="css">img.grayscale:hover { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale"); }</code>
其他注意事项:
示例:
<code class="css">svg { background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg); }</code>
以上是如何在 Internet Explorer 10 中应用灰度滤镜?的详细内容。更多信息请关注PHP中文网其他相关文章!