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);