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