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

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

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

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

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

Демо:

Вывод

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>​​​​​​​​​​​​

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

transform: scale(1.03);

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

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

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

Я использовал -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).

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

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

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

.parent {
    -webkit-box-shadow: inset 0 0 200px #000000;
       -moz-box-shadow: inset 0 0 200px #000000;
            box-shadow: inset 0 0 200px #000000;
}

Во многих ситуациях, когда 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);
}

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

Ключ состоит в том, чтобы поместить изображение в контейнер и преобразовать: масштабировать этот контейнер из его переполнения: скрытого родителя. Затем размытие применяется к 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);
}

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

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

Вставьте изображение внутрь с помощью 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.

Вы можете предотвратить перекрытие краев изображения, обрезав изображение и применив элемент оболочки, который устанавливает эффект размытия на 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);
}

Самый простой способ - просто добавить прозрачную границу к 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

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

ДОМ:

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

CSS:

div {
   border: 1px solid black;
}
img {
    filter: blur(5px);
}

Я обнаружил, что в моем случае мне не нужно добавлять оболочку.

Я только что добавил -

margin: -1px;

или же

margin: 1px; // any non-zero margin
overflow: hidden;

Мой размытый элемент был абсолютно позиционирован.

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

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

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

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

filter: blur(5px);
margin-top: -5px;
padding-bottom: 10px;
margin-left: -5px;
padding-right: 10px;