Как сделать размытие картинки в css

Как я могу размыть изображение с помощью CSS, но сохранить границы прямо?

Я пытаюсь размыть изображение с помощью CSS. Я использую "размытие", но я нахожу это также размывает границы. Есть ли способ сохранить границу прямой, но размыть остальную часть изображения?

5 ответов

Попробуйте что-то вроде этого:

По какой-то причине, по крайней мере, в Chrome требуется поле для изображения.

Скорее всего, вам понадобится обернуть это изображение в элемент уровня блока и установить его размеры в соответствии с изображением и добавить overflow: hidden

Оберните div вокруг изображения и укажите размер div на несколько пикселей меньше размера изображения (в противном случае край размытия не будет обрезан). Затем поместите overflow:hidden в div.

Сделайте div с рамкой, просто наложите на него изображение, затем размыте изображение.

Чтобы сохранить резкость краев, вы можете сначала переместить изображение в пределах его контейнера влево и увеличить на столько же размытие — это очистит верхний /левый края. Чтобы повысить резкость нижнего /правого края, уменьшите ширину контейнера изображения на 2 * величину размытия.

Размытие краев изображения или фонового изображения с помощью CSS

Я знаю, что существует множество новых фильтров CSS, и мне интересно, есть ли способ применить их к изображению или фоновому изображению. Все, что я прочитал, говорит о смягчении изображения с помощью падающей тени, однако падающая тень — это цвет, и я хочу размыть края изображений, чтобы я мог более плавно смешивать их, если бы они были рядом друг с другом. Прямо сейчас похоже, что вы можете использовать только падающую тень или применить размытие ко всему изображению (на основе того, что я прочитал).

Самое близкое, что я могу придумать, — это полупрозрачная тень блока . вот так

4 ответа

Если вам нужно просто размыть края изображения, вы можете просто использовать box-shadow со вставкой.

Screenshot

HTML:

CSS

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

Screenshot

Обратите внимание, что эффект размытия использует изображение, поэтому оно меняется в зависимости от цвета изображения.

Надеюсь, это поможет.

Если вы устанавливаете изображение в div, вы также должны установить высоту и ширину. Это может привести к потере пропорций изображения. Кроме того, вы должны установить URL-адрес изображения в CSS вместо HTML.

Вместо этого вы можете установить изображение с помощью тега IMG. В классе контейнера вы можете установить только ширину в процентах или пикселях, а высота автоматически сохранит пропорции.

Это также более эффективно для доступа поисковых систем и систем чтения для определения изображения с помощью тега IMG.

Как сделать размытие картинки в css

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

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

Так что сам размытые фоны может стать очень мощным инструментом в вашем арсенале редактирования фотографий.

.nasenouncud <
position:fixed;
top:0;
z-index:0;
width:100%;
padding-top:50%;
background: url(Ссылка на изображение&#41; center center no-repeat;
-webkit-background-size:247%;
-moz-background-size:247%;
-o-background-size:247%;
background-size:247%;
-webkit-box-shadow: 0 -50px 20px -20px #211f1f inset;
-moz-box-shadow: 0 -50px 20px -20px #232323 inset;
box-shadow: 0 -50px 20px -20px #232323 inset;
>

$(function(&#41; <
zoom = $(‘.nasenouncud’&#41;.css(‘background-size’&#41;
zoom = parseFloat(zoom&#41;/100
size = zoom * $(‘.nasenouncud’&#41;.width(&#41;;
$(window&#41;.on(‘scroll’, function(&#41; <
fromTop = $(window&#41;.scrollTop(&#41;;
newSize = size — (fromTop/3&#41;;
if (newSize > $(‘.nasenouncud’&#41;.width(&#41;&#41; <
$(‘.nasenouncud’&#41;.css( <
‘-webkit-background-size’: newSize,
‘-moz-background-size’: newSize,
‘-o-background-size’: newSize,
‘background-size’: newSize,
‘-webkit-filter’:’blur(‘+ 0 + (fromTop/100&#41; + ‘px&#41;’,
‘opacity’: 1 — ((fromTop / $(‘html’&#41;.height(&#41;&#41; * 1.3&#41;
>&#41;;
>
>&#41;;
>&#41;;

Здесь нужно заметить, что этот эффект создан с помощью загрузки JavaScript и плагина, что представлено в материале, где это не необязательно для современного браузера.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *