Белое размытие вокруг изображения при использовании фильтра размытия CSS3?

Сегодня я решил изменить дизайн своего веб-сайта и подойти к нему с другой стороны. Вместо того, чтобы сосредоточиться на типографике, я бы просто добавил большое изображение и небольшой текст. Я просто сделал:

html {
    background: url(../img/background.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    filter: blur(10px);
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
}

... однако, когда я вижу это в браузере (Chrome Version 26.0.1386.0 dev, работает на Ubuntu 12.10), изображение размыто, но также присутствует блеклая белая рамка. На снимке экрана показано, как выглядит эта проблема.

Есть ли способ обойти это? Я просмотрел этот вопрос о переполнении стека, но не смог ответить на него работать (отчасти потому, что в этом примере используется тег <img>, а не только <html>). Белая рамка выглядит не очень эстетично. И нет, на изображении нет белой рамки (это просто скриншот моего рабочего стола с парой открытых окон, поэтому белой рамки нет). Любые идеи, почему это происходит?

Спасибо за вашу помощь и время.


filter blur css
person Community    schedule 27.01.2013    source источник
comment
Попробуйте установить цвет фона для вашего html. Может возникнуть проблема, если вы используете изображение только с размером, точно равным размеру области просмотра.   -  person Christian Kuetbach    schedule 27.01.2013
comment
Обновить. если я установлю вам CSS для этой страницы, я получу черную рамку. Кажется, что черный исходит из элемента тела. Попробуйте прозрачный фон на теле или цвет вашего изображения.   -  person Christian Kuetbach    schedule 27.01.2013
comment
Кажется, я не понимаю. Я установил background-color: #481124; в тег html, но без изменений. Что вы имеете в виду под прозрачным фоном на теле или цветом [моего] изображения? Кроме того, текст также становится размытым (я заметил это после публикации).   -  person    schedule 27.01.2013
comment
Установите цвет фона для элемента body.   -  person Patrick James McDougle    schedule 17.12.2013

Ответы (1)


arrow_upward
16
arrow_downward

Если это возможно для вас, я нашел хороший обходной путь: сделать изображение больше, чем <div>, а также обрезать края с помощью overflow: hidden.

В вашем случае, поскольку это весь тег <html>, я бы поместил изображение в <div> со следующим CSS:

position: fixed;
top: 0;
left: 0;
transform: scale(1.02); # or whatever scale amount removes the border

Это всегда работает для меня.

person Sheraff    schedule 21.02.2014