Визначені краї із розмиттям фільтра CSS3

Я розмиваю деякі зображення цим кодом

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

Краї зображення також розмиваються. Чи можна розмити зображення, зберігаючи краї, визначені? Як розмиття вставки чи щось інше?

Ви можете помістити його в <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>​​​​​​​​​​​​

Я зміг зробити цю роботу з

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);
}

Тільки натяк на прийняту відповідь. Якщо ви використовуєте абсолютну позицію, негативні поля не будуть працювати, але ви все одно можете встановити для верхнього, нижнього, лівого та правого значень від’ємне значення і зробити переповнення батьківського елемента прихованим.

Відповідь на додавання кліпу до абсолютного зображення має проблему, якщо ви не знаєте розмір зображення.

Вставте зображення всередину символів з 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, який містить зображення, і встановити його властивість відображення на 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

Ви можете спробувати додати межу до іншого елемента:

DOM:

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