Css перевод 50% на нечетное фоновое изображение размытия ширины / высоты - PullRequest
Новая
       27

Css перевод 50% на нечетное фоновое изображение размытия ширины / высоты

1 голос
/ 26 июня 2019

Я работаю над div, который имеет нечетное width/height, и мне нужно преобразовать его на 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 вычисления десятичного значения.

Редактировать: я заметил это добавление только на хром.

1 Ответ

0 голосов
/ 26 июня 2019

Попробуйте, у меня это сработало.

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