Bootstrap 和 CSS 过渡
Bootstrap with CSS Transition
嘿,多年来我一直在努力解决这个问题,而且我已经花了好几个小时寻找解决方案!并尝试了我在 Stack overflow 和其他各种网站上遇到的几乎所有内容。
我不确定我的问题是像素舍入、Bootstrap 还是 CSS 过渡。
这似乎是一个常见问题,我的图像网格之间存在 1px 的间隙,尤其是在浏览器调整大小时。
网格本身工作完美并且可以很好地缩放,但是我已经为悬停标题添加了一些代码并且这似乎导致了我所尝试的问题。
悬停状态代码位于此处:Image caption Hover animation
这是正在发生的事情的一个工作示例 - Working Example
我尝试添加有人推荐的 -webkit-backface-visibility: hidden;
,但我完全被难住了,我在 Chrome、Firefox 和 Safari 中遇到了同样的问题。
只需添加
clip: rect(10px, 10px, 10px, 10px);
进入你的
.hovereffect img
比添加此 属性 和值
-webkit-mask-image: -webkit-radial-gradient(square, white, black);
进入你的 .hovereffect
这应该有效。
嘿,多年来我一直在努力解决这个问题,而且我已经花了好几个小时寻找解决方案!并尝试了我在 Stack overflow 和其他各种网站上遇到的几乎所有内容。
我不确定我的问题是像素舍入、Bootstrap 还是 CSS 过渡。
这似乎是一个常见问题,我的图像网格之间存在 1px 的间隙,尤其是在浏览器调整大小时。
网格本身工作完美并且可以很好地缩放,但是我已经为悬停标题添加了一些代码并且这似乎导致了我所尝试的问题。
悬停状态代码位于此处:Image caption Hover animation
这是正在发生的事情的一个工作示例 - Working Example
我尝试添加有人推荐的 -webkit-backface-visibility: hidden;
,但我完全被难住了,我在 Chrome、Firefox 和 Safari 中遇到了同样的问题。
只需添加
clip: rect(10px, 10px, 10px, 10px);
进入你的
.hovereffect img
比添加此 属性 和值
-webkit-mask-image: -webkit-radial-gradient(square, white, black);
进入你的 .hovereffect
这应该有效。