html - Css 在奇数宽度/高度模糊背景图像上翻译 50%

Question

我正在处理一个具有奇数 width/height 的 div，我需要将其转换 50%，这会模糊我的背景图像。有办法解决吗？

我已经尝试:

• scale(2) 和 zoom(.5)，但是当我移动组件时这会给我带来问题。
• backface-visibility: hidden; 或 -webkit-font-smoothing: subpixel-antialiased;，但这只会修复 div 中模糊的文本。
• 过滤器:blur(0)
• 使用 perspective(1) 等技巧或从宽度/高度中删除单个像素与其说是一种解决方案，不如说是一种黑客攻击。

<div class="my-div any-other-random-class"/>

// CSS
.myclass {
   transform: translate(50%, 50%);
}

.any-other-random-class{
   width: 123px;
   height: 111px;
}

我希望背景图像不会模糊，但由于 translate 计算了一个小数值，所以模糊了。

编辑:我注意到这只出现在 chrome 上。

Answer 1

试试这个，它对我有用。

 transform: translateZ(0) translate(50%, 50%);
 backface-visibility: hidden;
 -webkit-filter: blur(0);
 filter: blur(0);