
使用 CSS 实现鼠标悬停时颜色恢复的灰度化
可以通过多种方法实现鼠标悬停时颜色恢复的灰度外观,在 IE 和 Firefox 中提供跨浏览器兼容性。
方法 1:纯 CSS(使用单色图像)
此技术利用供应商的过滤器属性在所有支持的浏览器中对图像进行灰度化的前缀:
1 2 3 4 5 6 7 8 9 10 | <code class = "css" >img.grayscale {
filter: url( "data:image/svg+xml;utf8, ..." );
filter: gray;
-webkit-filter: grayscale(100%);
}
img.grayscale:hover {
filter: none;
-webkit-filter: grayscale(0%);
}</code>
|
登录后复制
方法 2:纯 CSS(使用两个图像)
另一种方法涉及使用两个图像:灰度版本和彩色版本。最初显示灰度图像,悬停状态转换为彩色图像:
1 2 3 4 5 6 7 8 9 10 11 | <code class = "css" >img {
transition: all .6s ease;
}
img:hover {
opacity: 0;
}
.grayscale {
opacity: 1;
}</code>
|
登录后复制
1 2 | <code class = "html" ><img class = "grayscale" src= "grayscale_image.jpg" >
<img class = "colored" src= "colored_image.jpg" ></code>
|
登录后复制
方法 3:带有 CSS 滤镜的 SVG
适用于 IE10和现代浏览器一样,内联 SVG 可用于应用滤镜,从而动态控制灰度效果:
1 2 3 4 5 6 7 | <code class = "css" >svg image {
transition: all .6s ease;
}
svg image:hover {
opacity: 0;
}</code>
|
登录后复制
1 2 3 4 5 6 7 8 | <code class = "xml" ><svg ...>
<defs>
<filter id= "filtersPicture" >
<feColorMatrix type= "saturate" values= "0" />
</filter>
</defs>
<image filter= "url(#filtersPicture)" ... />
</svg></code>
|
登录后复制
以上是如何使用 CSS 实现鼠标悬停时的灰度和颜色恢复?的详细内容。更多信息请关注PHP中文网其他相关文章!