Определенные края с помощью CSS3 Filter Blur

Ответ 1

Вы можете поместить его в <div> с помощью 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>​​​​​​​​​​​​

Ответ 2

Я смог выполнить эту работу с помощью

transform: scale(1.03);

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

Отметьте http://jsfiddle.net/ud5ya7jt/

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

Ответ 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);
}

DEMO: http://jsfiddle.net/DA5L4/18/

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

Update

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

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

Ответ 4

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

Это тоже выглядит очень хорошо:)

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

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

Ответ 5

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

Ответ 6

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

Ответ 7

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

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

Ответ 8

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

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

Ответ 9

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

DOM:

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

CSS

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

Ответ 10

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

Ответ 11

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

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

margin: -1px;

или

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

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

Ответ 12

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

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

Ответ 13

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

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

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