Определенные края с размытием фильтра CSS3

79

Я размываю некоторые изображения этим кодом

img {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}

Однако края изображения тоже размываются. Можно ли размыть изображение, сохранив границы? Как вставка размытия или что-то в этом роде?

css 
— Colmtuite
источник

Ответы:

103

Вы можете поместить его в <div>with overflow: hidden;и установить <img>значение margin: -5px -10px -10px -5px;.

Демо: jsFiddle

Вывод

CSS

img {
    filter: blur(5px);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
    margin: -5px -10px -10px -5px;
}

div {
    overflow: hidden;
}
​

HTML

<div><img src="http://placekitten.com/300" />​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​</div>​​​​​​​​​​​​
— Мышление
источник
1
@Moppy Это не работает в Chrome 23 / OS X для меня. Я думаю, что marginэто необходимо.
— ThinkingStiff
1
@Moppy Потому что он imgнаходится внутри divи blurвыходит за границы div. overflow: hidden;Отрезает его.
— ThinkingStiff
10
Что с хламом внизу JSFiddle? Я не понимаю, почему GA необходимо отслеживать JSFiddle ...
— Боджанглс,
1
@Bojangles, "мусор" внизу изображения в jsfiddle находится в самом изображении .
— uberdog
3
Есть ли способ сделать это для фонового изображения? Идея состоит в том, чтобы создать размытое фоновое изображение с текстом на нем
— Гай
57

Я смог сделать эту работу с

transform: scale(1.03);

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

Проверьте http://jsfiddle.net/ud5ya7jt/

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

— Жоао Жозезиньо
источник
это красиво, просто и регулируется. он отлично работает в моей ситуации jsfiddle.net/ud5ya7jt/28, в то время как некоторые другие решения, похоже, сейчас не работают .
— Джинни
Большое спасибо за это, это именно то, что я искал :)
— jeerbl
1
установка родителя с помощью overflow: hiddenудалит полосы прокрутки! благодаря!
— dimmg
1
Такое простое решение!
— Dotl
scale (1) действительно работает, но значение 1.03 таково, что мы обрезаем изображение на 3%, чтобы размытые края не были так легко заметны
— Жоао Жозезиньо
17

Я использовал -webkit-transform: translate3d(0, 0, 0);с overflow:hidden;.

ДОМ:

<div class="parent">
    <img class="child" src="http://placekitten.com/100" />
</div>

CSS:

.parent {
    width: 100px;
    height: 100px;
    overflow: hidden;
    -webkit-transform: translate3d(0, 0, 0);
}
.child {
    -webkit-filter: blur(10px);
}

ДЕМО: http://jsfiddle.net/DA5L4/18/

Эта техника работает на Chrome34 и iOS7.1.

Обновить

http://jsfiddle.net/DA5L4/50/

если вы используете последнюю версию Chrome, вам не нужно использовать -webkit-transform: translate3d(0, 0, 0);взлом. Но это не работает в Safari (webkit).

— GeckoTang
источник
@Razvan Cercelaru правда? в какой версии сафари вы проверяли мою демонстрацию? Работает в Mac Safari 7.
— GeckoTang 05
Сработало у меня! Благодаря! (Chromium 50.0.2661.86 (64-разрядная версия) OSX)
— iperdiscount
12

Вы также можете сохранить все видео целиком, вам не нужно что-то вырезать.
Вы можете накладывать тени на размытые белые края.

Это тоже выглядит очень красиво :)

Просто вставьте этот код в родительский элемент ваших видео:

.parent {
    -webkit-box-shadow: inset 0 0 200px #000000;
       -moz-box-shadow: inset 0 0 200px #000000;
            box-shadow: inset 0 0 200px #000000;
}
— ГлаббичРулц
источник
1
Прекрасно работает, ни одно из других предложений не помогло.
— DGibbs
2
В моем случае это помогло, но по-прежнему оставалось нежелательное размытие, поэтому я добавил дополнительный слой тени блока:box-shadow: inset 0 0 200px #000000, inset 0 0 200px #000000;
— falsarella
6

Во многих ситуациях, когда IMG можно сделать position: absolute , вы можете использовать clip, чтобы скрыть размытые края - и внешний DIV не нужен.

img {
    filter: blur(5px);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
    position: absolute;
    clip: rect(5px,295px,295px;5px);
}
— Генедронек
источник
1
caniuse.com/#feat=css-clip-path здесь обозреватель поддерживает обрезку. IE лучший 😆
— Филип Джулиани
6

Решив сегодня эту же проблему, я хотел бы представить решение, которое (в настоящее время) работает в основных браузерах. Некоторые другие ответы на этой странице работали один раз, но недавние обновления, будь то браузер или ОС, аннулировали большинство / все эти ответы.

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

Рабочий скрипт: https://jsfiddle.net/x2c6txk2/

HTML

<div class="container">
    <div class="img-holder">
        <img src="https://unsplash.it/500/300/?random">
    </div>
</div>

CSS

.container {
    width    : 90%;
    height   : 400px;
    margin   : 50px 5%;
    overflow : hidden;
    position : relative;
}

.img-holder {
    position  : absolute;
    left      : 0;
    top       : 0;
    bottom    : 0;
    right     : 0;
    transform : scale(1.2, 1.2);
}

.img-holder img {
    width          : 100%;
    height         : 100%;
    -webkit-filter : blur(15px);
    -moz-filter    : blur(15px);
    filter         : blur(15px);
}
— Рориморрис89
источник
3

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

Ответ о добавлении клипа для позиционирования абсолютного изображения вызывает проблему, если вы не знаете размер изображения.

— cn123h
источник
2

Вставьте изображение внутрь с помощью position: relative;иoverflow: hidden;

HTML

<div><img src="#"></div>

CSS

div {
    position: relative;
    overflow: hidden;
}
img {
    filter: blur(5px);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
}

Это также работает с элементами переменного размера, такими как динамические div.

— bpanatta
источник
1

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

HTML

<div id="wrapper">
  <div id="image"></div>
</div>

CSS

#wrapper {
  width: 1024px;
  height: 768px;

  border: 1px solid black;

  // 'blur(0px)' will prevent the wrapped image
  // from overlapping the border
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: blur(0px);
}

#wrapper #image {
  width: 1024px;
  height: 768px;

  background-image: url("../images/cats.jpg");
  background-size: cover;

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

  // Position 'absolute' is needed for clipping
  position: absolute;
  clip: rect(0px, 1024px, 768px, 0px);
}
— Бенни Нойгебауэр
источник
1

Самый простой способ - просто добавить прозрачную границу к div, содержащему изображение, и установить для его свойства display значение inline-block следующим образом:

CSS:

div{
margin: 2rem;
height: 100vh;
overflow: hidden;
display: inline-block;
border: 1px solid #00000000;
}

img {
-webkit-filter: blur(2rem);
filter: blur(2rem);
}

HTML

<div><img src='https://images.unsplash.com/photo-1557853197-aefb550b6fdc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=375&q=80' /></div>

Вот код, изображающий то же самое: https://codepen.io/arnavozil/pen/ExPYKNZ

— arnavpanwar99
источник
0

Вы можете попробовать добавить границу к другому элементу:

ДОМ:

<div><img src="#" /></div>

CSS:

div {
   border: 1px solid black;
}
img {
    filter: blur(5px);
}
— Krycke
источник
0

Вот решение, которое я придумал, сохраняет 100% изображения и не требует кадрирования:

В основном я зеркально отражаю изображение в сетке 3x3, затем размываю все, а затем увеличиваю центральное изображение, эффективно создавая повторяющиеся края при размытии после эффектов, немного странно, что css3 не имеет встроенных повторяющихся краев.

Ссылка на метод / код: Как размыть изображение с помощью CSS3 без обрезки и затухания краев?

— Патрик Фрелер
источник
1
Хотя эта ссылка может дать ответ на вопрос, лучше включить сюда основные части ответа и предоставить ссылку для справки. Ответы, содержащие только ссылки, могут стать недействительными, если ссылка на страницу изменится.
— Арнон Зилка, 02
Ну да, забавно, что вы так говорите, потому что я только что обновил этот пост и заголовок, и это полностью испортило ссылку здесь x)
— Патрик Фрелер
0

Если вы используете фоновое изображение, я нашел лучший способ:

filter: blur(5px);
margin-top: -5px;
padding-bottom: 10px;
margin-left: -5px;
padding-right: 10px;
— Elad Swissa
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.