Definierte Kanten mit CSS3-Filterunschärfe

Ich verwische einige Bilder mit diesem Code

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

Die Bildränder verschwimmen jedoch ebenfalls. Ist es möglich, das Bild zu verwischen, während die Kanten definiert bleiben? Wie eine kleine Unschärfe oder so?

Sie könnten es in ein <div>mit setzen overflow: hidden;und das <img>auf setzen margin: -5px -10px -10px -5px;.

Demo:

Ausgabe

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

Ich konnte diese Arbeit mit dem machen

transform: scale(1.03);

Eigenschaft, die auf das Bild angewendet wird. Aus irgendeinem Grund würden die anderen bereitgestellten Lösungen in Chrome nicht funktionieren, wenn ein relativ positioniertes übergeordnetes Element vorhanden wäre.

Überprüfen Sie http://jsfiddle.net/ud5ya7jt/

Auf diese Weise wird das Bild leicht um 3% vergrößert und die Kanten werden beschnitten, was bei einem unscharfen Bild ohnehin kein Problem sein sollte. In meinem Fall hat es gut funktioniert, weil ich ein hochauflösendes Bild als Hintergrund verwendet habe. Viel Glück!

Ich habe -webkit-transform: translate3d(0, 0, 0);mit verwendet 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/

Diese Technik funktioniert unter Chrome34 und iOS7.1

Aktualisieren

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

Wenn Sie die neueste Version von Chrome verwenden, müssen Sie keinen -webkit-transform: translate3d(0, 0, 0);Hack verwenden. Auf Safari (Webkit) funktioniert dies jedoch nicht.

Sie können auch das gesamte Video behalten, Sie müssen nichts wegschneiden.
Sie können eingefügte Schatten über die weiß verschwommenen Kanten legen.

Das sieht auch sehr gut aus :)

Fügen Sie diesen Code einfach in das übergeordnete Element Ihrer Videos ein:

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

In den vielen Situationen, in denen der IMG positioniert werden kann: absolut , können Sie den Clip verwenden , um die unscharfen Kanten auszublenden - und der äußere DIV ist nicht erforderlich.

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

Nachdem ich mich heute selbst mit diesem Problem befasst habe, möchte ich eine Lösung vorstellen, die (derzeit) auf den wichtigsten Browsern funktioniert. Einige der anderen Antworten auf dieser Seite haben einmal funktioniert, aber die letzten Updates, egal ob Browser oder Betriebssystem, haben die meisten / alle dieser Antworten ungültig gemacht.

Der Schlüssel besteht darin, das Bild in einem Container zu platzieren und zu transformieren: Skalieren Sie diesen Container aus seinem Überlauf heraus: verstecktes übergeordnetes Element. Dann wird die Unschärfe auf das Bild im Behälter anstatt auf den Behälter selbst angewendet.

Working Fiddle: 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);
}

Nur ein Hinweis auf diese akzeptierte Antwort: Wenn Sie die absolute Position verwenden, funktionieren negative Ränder nicht. Sie können jedoch den oberen, unteren, linken und rechten Wert auf einen negativen Wert setzen und den Überlauf des übergeordneten Elements ausblenden.

Die Antwort zum Hinzufügen eines Clips zur Position des absoluten Bilds hat ein Problem, wenn Sie die Bildgröße nicht kennen.

Fügen Sie das Bild in ein mit position: relative;und einoverflow: 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);
}

Dies funktioniert auch bei Elementen mit variabler Größe, wie z. B. dynamischen Divs.

Sie können verhindern, dass das Bild seine Kanten überlappt, indem Sie das Bild abschneiden und ein Wrapper-Element anwenden, das den Unschärfeeffekt auf 0 Pixel setzt. So sieht es aus:

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

Am einfachsten ist es, dem Div, der das Bild enthält, einen transparenten Rand hinzuzufügen und seine Anzeigeeigenschaft wie folgt auf Inline-Block zu setzen:

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>

Hier ist ein Codepen, der dasselbe darstellt: https://codepen.io/arnavozil/pen/ExPYKNZ

Sie können versuchen, den Rand eines anderen Elements hinzuzufügen:

DOM:

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

CSS:

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

Ich stellte fest, dass ich in meinem Fall keinen Wrapper hinzufügen musste.

Ich habe gerade hinzugefügt -

margin: -1px;

oder

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

Mein verschwommenes Element war absolut positioniert.

Hier ist eine Lösung, die ich mir ausgedacht habe. Sie behält 100% des Bildes bei und es ist kein Zuschneiden erforderlich:

Grundsätzlich spiegele ich das Bild im 3x3-Raster, verwische dann alles und zoome dann in das mittlere Bild hinein, wodurch beim Verwischen von After-Effekten eine Art Wiederholungskante entsteht. Es ist ein bisschen seltsam, dass in CSS3 keine Wiederholungskante eingebaut ist.

Link zur Methode / zum Code: Wie verwische ich ein Bild mit CSS3, ohne die Kanten zu beschneiden oder zu verblassen?

Wenn Sie ein Hintergrundbild verwenden, habe ich am besten Folgendes gefunden:

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