css - 使用过滤器时 CSS 过渡模糊

Question

我正在开发一个使用 CSS 来创建六边形的网站。此技术使用变换来旋转框，使用 overflow:hidden 裁剪边缘，然后将图像向相反方向旋转以呈现直线并显示六边形，here's the codepen我进行了修改以使其正常工作。如您所见，过渡效果很好。

我现在遇到的问题是，我想在悬停时将灰度滤镜应用到我的设计中，但我发现我所有的过渡现在都很模糊。在 Firefox Dev Edition 中，我看到图像和文本开始清晰，悬停时变得模糊，然后又变回清晰。在 Chrome 中查看时，无论悬停与否，一切都是模糊的。

.hexContainer {width:400px;}
#categories {overflow:hidden;width:100%;margin:0 auto; padding:0 0 1em; position: relative;}
#categories .hexBox {position:relative;list-style-type:none;width:100%;padding-bottom:115%;float:left;overflow:hidden;visibility:hidden;-webkit-transform:rotate(-60deg) skewY(30deg);-ms-transform:rotate(-60deg) skewY(30deg);transform:rotate(-60deg) skewY(30deg); z-index: 10;}
#categories .hexBox *{position:absolute;visibility:visible;}
#categories .hexBox>div{width:100%;height:100%;text-align:center;color:#fff;overflow:hidden;-webkit-transform:skewY(-30deg) rotate(60deg);-ms-transform:skewY(-30deg) rotate(60deg);transform:skewY(-30deg) rotate(60deg);-webkit-backface-visibility:hidden;}
#categories .hexBox img{left:-100%;right:-100%;width:auto;height:100%;margin:0 auto;  -webkit-filter: grayscale(100%); filter: grayscale(100%); transition: all 0.25s ease-in-out; -webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out; -webkit-transform: translateZ(0); }
#categories .hexBox h3 {position: absolute; bottom: 25%; left: 2%; font-weight: 300; color: #fff; transition: all 0.25s ease-in-out; -webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;}
#categories .hexBox h3 strong {font-weight: 700; padding-left:.25em;}
#categories div p{width:90%;padding:0 5%;}
#categories .hexBox p{padding-top:50%;top:110%;padding-bottom:50%;}

/* hovers */
#categories .hexBox div:hover p{top:50%;padding-top:10%;}
#categories .hexBox div:hover img { -webkit-filter: grayscale(0%); filter: grayscale(0%); -webkit-transform: translateZ(0); }
#categories .hexBox div:hover h3 {bottom:40%;}

你可以在这里看到这个问题 http://codepen.io/anon/pen/MwgebO

关于如何解决这个问题有什么想法吗？

Answer 1

我想我有一个解决方案。至少在我的系统中它没有模糊。

codepen

我做了什么:

1) 重要提示:图像正在重新缩放显示。原始分辨率 500x500，但指定宽度 480px。这无助于使显示清晰

2) 改变获取灰度的方式。从图像中移除过滤器，并添加混合模式

#categories .hexBox img{
    left:-100%;  
    right:-100%; 
    margin:0 auto;  
    mix-blend-mode: luminosity;  
    -webkit-transform: translateZ(0); 
}

现在，为了混合模式给出结果，我们需要容器中有白色背景

#categories .hexBox>div{
    width:100%;
    height:100%;
    text-align:center;
    background-color: white; 
    transition: all 2s ease-in-out;
}

然后我们在上面设置了过渡。

现在，对于灰度滤镜的淡出，我们只需要让容器透明

#categories .hexBox div:hover {
    background-color: transparent;
}

对混合模式的支持或多或少等同于滤镜。