Странная ошибка с фильтрами SVG в CSS

В настоящее время я пытаюсь найти лучший способ ленивой загрузки изображений. При загрузке я хочу показать крошечное изображение оригинала размером 10x10 (inline/base64). Поскольку это крошечное изображение имеет очень плохое качество, мне нужно размыть его, пока не будет загружено исходное изображение с высоким разрешением. К сожалению, CSS-фильтр по умолчанию blur() добавляет эту белую область вокруг изображений, которых я хочу избежать.

По этой причине я искал и нашел этот фильтр SVG, чтобы сделать изображения размытыми без ярких границ.

К сожалению, у меня есть этот сумасшедший странный вид на моем Mac с Chrome. На других макбуках так же. В Windows не тестировал. В Safari и в Chrome на iPhone я вообще не вижу фильтра.

Есть ли у вас какие-либо идеи, как получить контроль над этой проблемой?

img {
  filter: url("data:image/svg+xml,%3Csvg xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' aria-labelledby='title desc'%3E%3Cdefs%3E%3Cfilter id='blur' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20' edgeMode='duplicate' /%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1' /%3E%3C/feComponentTransfer%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E#blur");
   margin: 50px;
}
<img 
    class="highres  " 
    src="https://images.unsplash.com/photo-1520206183501-b80df61043c2?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2251&q=80" height="600"
        
>

https://codepen.io/flexplosion/pen/abBdeRo

введите здесь описание изображения


svg google-chrome css css-filters svg-filters
person rakete    schedule 05.02.2021    source источник
comment
если у вас очень маленькое изображение и вы хотите его размыть, используйте image-rendering: crisp-edges; Пожалуйста, ознакомьтесь с этой статьей: /css-tricks: рендеринг изображения   -  person enxaneta    schedule 06.02.2021
comment
@enxaneta Переключил все на этот рендеринг изображений, который кажется идеальным. Особенно с этой пиксельной опцией, которая, в зависимости от веб-сайта, тоже может быть очень крутой, я думаю. Хотите создать его как ответ?   -  person rakete    schedule 06.02.2021
comment
Не стесняйтесь отвечать на свой вопрос. буду рад проголосовать   -  person enxaneta    schedule 06.02.2021

Ответы (1)


arrow_upward
0
arrow_downward

Проблема в том, что у вас есть полупрозрачное сглаживание вокруг изображения, которое используемый вами фильтр преобразует в полностью непрозрачный, поэтому вы получаете странные цвета. Если вы измените параметры для tableValues ​​- это решит ваши проблемы.

img {
  filter: url("data:image/svg+xml,%3Csvg xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' aria-labelledby='title desc'%3E%3Cdefs%3E%3Cfilter id='blur' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20' edgeMode='duplicate' /%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1' /%3E%3C/feComponentTransfer%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E#blur");
   margin: 50px;
}
<img 
    class="highres  " 
    src="https://images.unsplash.com/photo-1520206183501-b80df61043c2?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2251&q=80" height="600"
        
>

person Michael Mullany    schedule 08.03.2021