带有 CSS 过渡的引导程序

Posted 2023-05-08

【中文标题】带有 CSS 过渡的引导程序

【英文标题】：Bootstrap with CSS Transition

【发布时间】：2016-10-20 09:01:21

【问题描述】：

嘿，所以我多年来一直试图解决这个问题，并且我一直在寻找解决方案几个小时！并尝试了我在 Stack Overflow 和其他各种网站上遇到的几乎所有内容。

我不确定我的问题是像素舍入、Bootstrap 还是 CSS 过渡。

这似乎是一个常见问题，我的图像网格之间有 1px 的间隙，尤其是在浏览器调整大小时。

网格本身可以完美地工作并且可以很好地缩放，但是我为悬停标题添加了一些代码，这似乎导致了我尝试过的问题。

悬停状态代码位于此处：Image caption Hover animation

这是正在发生的事情的一个工作示例 - Working Example

我尝试添加有人推荐的-webkit-backface-visibility: hidden;，但我完全被难住了，我在 Chrome、Firefox 和 Safari 中遇到了同样的问题。

【参考方案1】：

只需添加

clip: rect(10px, 10px, 10px, 10px); 进入你的 .hovereffect img

比添加这个属性和值 -webkit-mask-image: -webkit-radial-gradient(square, white, black); 进入你的.hovereffect

这应该可行。