web-dev-qa-db-ja.com

CSSを使用してHTMLでImgとDivをぼかす

HTML要素にぼかしを適用することは可能ですか（div＆img）？

私はiPad専用に開発しているので、ブラウザ間の互換性は問題になりません。HTML5CSS3テクニックを使用できます。

テキストをぼかす方法は知っていますが、このCSSは実際のHTML要素またはその境界線をぼかすことはありません。

text-shadow: 0 0 8px #000;
color: transparent;

私はこれをグーグルで検索しましたが、ブラウザの画像がぼやけません：

filter: blur(strength=50);
javascripthtmlcsscss3
35
sazr

今日、CSSでコンテンツをぼかすことについてのクールなチュートリアルを見ましたbox-shadows、text-shadows、不透明度、および色。

デモは次のとおりです。 http://tympanus.net/Tutorials/ItemBlur/

そしてチュートリアル： http://tympanus.net/codrops/2011/12/14/item-blur-effect-with-css3-and-jquery/

28
Jasper

Webkitには、ぼかしの手法を可能にする_-webkit-filter_というプロパティがあります：-webkit-filter: blur(15px);

http://jsfiddle.net/danielfilho/KxWRA/

22
bafromca

画像の場合、これをcssに追加するだけです：

次の例では、半径5ピクセルのぼかしを使用します。そして、非常に重要使用可能なすべてのベンダープレフィックスを使用するため、「安定した」バージョンになるまで、この機能が実装されたすべてのブラウザーで動作します。

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

最良の方法は、同じ画像を何回か重ねて、オーバーレイしたものの異なる位置と不透明度をテストすることだと思います。

これが私が思いついたCSSです。私はnth-child CSS3セレクターを使用していることに注意してください（しかし、あなたはそれに関して問題を抱えていないようです）。

img {
    width:300px;
    height:300px;
    position:absolute;
    opacity:0.2;
}

.container {
    position:relative;
    overflow:hidden;
    width:300px;
    height:300px;
}

img:nth-child(1) {
    opacity:1;   
}

img:nth-child(2) {
    left:2px;
    top:2px;
}

img:nth-child(3) {
    left:-2px;
    top:-2px;
}

img:nth-child(4) {
    left:-1px;
    top:-1px;
}

img:nth-child(5) {
    left:1px;
    top:1px;
}

HTML：

<div class="container">
    <img src="...">
    <img src="...">
    <img src="...">
    <img src="...">
    <img src="...">
</div>

結果 はかなり有望です。

4
Purag

CSSには、text-shadowおよびbox-shadow。ただし、これらの場合でも、境界線と画像をぼかすことはできません。

このJavaScriptライブラリ ただし、画像を処理できます。

また、あなたはこれを見つけるかもしれません technique 面白い。これは、事前に作成されたぼやけた画像を使用したきちんとした錯覚です。

2
bookcasey

少し前にこの問題をかなり徹底的に調査しなければならなかったので、非常に柔軟なソリューションを思いつきました。ぼけた画像だけでなく、さまざまな種類の画像の動的なぼかし半径、オーバーレイの色、オーバーレイの不透明度も必要でした。また、背景の上に他の要素を重ねて背景の画像をぼかすだけのオプションも必要でした。これが、私が作成できた最高のクロスブラウザー（およびパフォーマンス）ソリューションです。

最初に、_blur.svg_という名前のSVGを手元に用意します。ぼかしフィルターを適用し、よく見ると、stdDeviation（ぼかし半径を設定する）は実際には、渡されたパラメーターからアセットを要求するURLにプログラムで設定されます。

_<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="#{params[:blur]}" />
</filter>
</svg>
_

次に、カスタマイズ可能なぼかし半径、オーバーレイカラー、オーバーレイ不透明度を使用して、任意のラッパーにぼかしオーバーレイを追加できるSCSSミックスインがありました。

_@mixin background_blurred($blur_radius:4, $overlay_color:white, $overlay_opacity:0.6) {
  position: relative;
  .background_blurred {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    filter: url('blur.svg#blur?blur=#{$blur_radius}');
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='#{$blur_radius}');
    transform: translateZ(0);
    &:after {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: $overlay_color;
      opacity: $overlay_opacity;
    }
  }
  .foreground {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
  }
}
_

なぜtransform: translateZ(0);を含めたのか疑問に思われるかもしれません。唯一の効果は、レンダリングのハードウェアアクセラレーションを強制して、パフォーマンスを維持することです。また、ベンダープレフィックスがない理由を疑問に思うかもしれません。 CanIUse でfilterのようなものを調べることができますが、私はこのプロジェクトで autoprefixer を使用してそのことを心配しました。そしてもちろん、なぜblur(4px)のようなものではなく、このSVGを使用してフィルタリングするのですか？それは簡単ではないでしょうか？ただし、Firefox（執筆時点）では、URLでfilterプロパティのみをサポートしています。

次に、ブラーミックスインをラッパークラスに適用できます。

_.my_wrapper_class {
  @include background_blurred(3, #f9f7f5, 0.7);
}
_

このメソッドでは、srcのイメージタグの代わりに、スタイル属性にカスタム背景が設定されたクラスを使用する必要があることに注意してください。背景の位置を微調整し、好みに合わせて背景サイズを上書きできます。

_<div class="my_wrapper_class">
  <div class="background_blurred" style="background: url('URL OF IMAGE TO BLUR') no-repeat; background-position: 50% 0;"></div>
  <div class="foreground">
    <p>Stuff that should appear above the blurred background and not be blurred.</p>
  </div>
</div>
_
1
Chris Fritz

CSS3を使用すると、画像を簡単に調整できます。ただし、これによって画像が変わることはありません。調整された画像のみを表示します。

ここでライブデモと完全なソースコードをご覧ください

http://purpledesign.in/blog/adjust-an-image-using-css3-html5/

詳細については、次のコードを参照してください。

画像をグレーにするには：

img {
 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);
}

セピア色の外観を与えるには：

    img {
     -webkit-filter: sepia(100%);
    -moz-filter: sepia(100%);
}

明るさを調整するには：

 img {
     -webkit-filter: brightness(50%);
     -moz-filter: brightness(50%);  
  }

コントラストを調整するには：

 img {
     -webkit-filter: contrast(200%);
     -moz-filter: contrast(200%);    
}

画像をぼかすには：

    img {
     -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
  }
0
Raj Sharma