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