90

このコードでいくつかの画像をぼかしています

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

ただし、画像のエッジもぼやけます。エッジを定義したまま、画像をぼかすことは可能ですか? はめ込みぼかしか何かのように？

4

15 に答える 15

115

<div>withに入れてto にoverflow: hidden;設定できます。<img>margin: -5px -10px -10px -5px;

デモ： jsフィドル

出力

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" />​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​&lt;/div>​​​​​​​​​​​​
于 2012-09-01T02:06:10.663 に答える
64

私はこれを

transform: scale(1.03);

画像に適用されるプロパティ。何らかの理由で、Chrome では、相対的に配置された親要素がある場合、提供されている他のソリューションは機能しません。

http://jsfiddle.net/ud5ya7jt/ を確認してください

このようにして、画像はわずかに 3% ズームインされ、エッジが切り取られますが、ぼやけた画像では問題になりません。背景として高解像度の画像を使用していたので、私の場合はうまくいきました。幸運を！

于 2014-09-16T18:49:33.763 に答える
14

ビデオ全体を保持することもできます。何かを切り取る必要はありません。
白くぼやけたエッジにインセット シャドウを重ねることができます。

これも本当に素敵に見えます:)

このコードを動画の親に貼り付けるだけです:

.parent {
    -webkit-box-shadow: inset 0 0 200px #000000;
       -moz-box-shadow: inset 0 0 200px #000000;
            box-shadow: inset 0 0 200px #000000;
}
于 2014-07-21T19:53:05.440 に答える
8

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);
}
于 2013-02-16T04:00:55.430 に答える
4

その受け入れられた答えへのヒントです。絶対位置を使用している場合、負のマージンは機能しませんが、上、下、左、右を負の値に設定して、親要素のオーバーフローを非表示にすることができます。

画像サイズがわからない場合、絶対画像の位置にクリップを追加することについての答えには問題があります。

于 2015-01-25T08:46:01.610 に答える
3

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 のような可変サイズの要素でも機能します。

于 2013-10-18T06:22:20.037 に答える
2

画像をクリッピングし、ぼかし効果を 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);
}
于 2014-07-08T12:31:34.583 に答える
1

背景画像を使用している場合、私が見つけた最良の方法は次のとおりです。

filter: blur(5px);
margin-top: -5px;
padding-bottom: 10px;
margin-left: -5px;
padding-right: 10px;
于 2015-10-08T07:05:43.693 に答える
-1

これは私が思いついた解決策であり、画像の100％を保持し、トリミングは必要ありません：

基本的に、画像を 3x3 グリッドでミラーリングし、すべてをぼかし、中央の画像をズームインして効果的に後処理でぼかしたときに繰り返しエッジのように作成します。css3 に繰り返しエッジが組み込まれていないのは少し奇妙です。

メソッド/コードへのリンク: CSS3 を使用してエッジをトリミングまたはフェードせずに画像をぼかすにはどうすればよいですか?

于 2015-10-02T08:31:47.177 に答える
-1

私の場合、ラッパーを追加する必要がないことがわかりました。

追加しました-

margin: -1px;

また

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

私のぼやけた要素は完全に配置されました。

于 2014-11-05T22:05:46.950 に答える
-1

他の要素に境界線を追加してみることができます:

ドム:

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

CSS:

div {
   border: 1px solid black;
}
img {
    filter: blur(5px);
}
于 2012-09-01T02:05:37.820 に答える