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

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

transform: scale(1.03);

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

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

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

Я -webkit-transform: translate3d(0, 0, 0); С overflow:hidden;.

DOM:

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

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

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

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

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

DOM:

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

CSS:

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

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

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

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

margin: -1px;

или

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

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

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

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

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

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

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