Css 在奇数宽度/高度模糊背景图像上转换 50%

Question

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

我已经尝试过：

• scale(2) 和 zoom(.5)，但是当我移动组件时这给了我一个问题。
• backface-visibility: hidden; 或 -webkit-font-smoothing: subpixel-antialiased;，但这只会修复 div 内模糊的文本。
• filter: 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);