web-dev-qa-db-ja.com

背景画像にCSS 3ぼかしフィルタを適用する方法

検索ページの背景画像として使用しているJPEGファイルがあり、それを設定するためにCSSを使用しています。これは、 Backbone.js コンテキスト内で作業しているためです。

background-image: url("whatever.jpg");

CSS 3ぼかしフィルタ only を背景に適用したいのですが、その1つの要素だけをスタイルする方法がわかりません。私が試した場合：

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

私のCSSのbackground-imageのすぐ下に、背景だけでなくページ全体をスタイルします。画像だけを選択してそれにフィルタを適用する方法はありますか？あるいは、ページ上の他のすべての要素に対してぼかしをオフにするだけの方法はありますか。

csscss3blurcss-filters
418
fox

pen をチェックしてください。

背景画像用とコンテンツ用に2つの異なるコンテナを使用する必要があります。

例では、.background-imageと.contentの2つのコンテナーを作成しました。

両方ともposition: fixedとleft: 0; right: 0;で配置されています。表示方法の違いは、要素ごとに設定が異なるz-index値にあります。

_ html _ 

<div class="background-image"></div>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam erat in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing, quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam at nisl eu felis vulputate porta.</p>
  <p>Fusce ut placerat eros. Aliquam consequat in augue sed convallis. Donec orci urna, tincidunt vel dui at, elementum semper dolor. Donec tincidunt risus sed magna dictum, quis luctus metus volutpat. Donec accumsan et nunc vulputate accumsan. Vestibulum tempor, erat in mattis fringilla, elit urna ornare nunc, vel pretium elit sem quis orci. Vivamus condimentum dictum tempor. Nam at est ante. Sed lobortis et lorem in sagittis. In suscipit in est et vehicula.</p>
</div>

_ css _ 

.background-image {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1;

  display: block;
  background-image: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG');
  width: 1200px;
  height: 800px;

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

.content {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 9999;
  margin-left: 20px;
  margin-right: 20px;
}

Lorem Ipsum Textへの謝罪。 

更新

Matthew Wilcoxsonに感謝.content:beforeを使ったより良い実装のために http://codepen.io/akademy/pen/FlkzB

491
Aniket

ペン

他のソリューションのように固定/絶対ではなく、コンテンツをドキュメントフロー内に収めることと共に、余分な要素の必要性をなくします。

達成した

.content {
  overflow: auto;
  position: relative;
}

オーバーフローオートが必要です、そうでなければ背景は上部の数ピクセル分オフセットされます。

この後は、単に必要です

.content:before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  z-index: -1;

  display: block;
  background-image: url('img-here');
  background-size:cover;
  width: 100%;
  height: 100%;

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

_ edit _ 端の白い境界線を削除したい場合は、幅と高さを110%、左と上を-5%にします。これはあなたの背景を少し大きくするでしょう - しかし、端から無地のにじみがあるべきではありません。 

ここにペンを更新しました： https://codepen.io/anon/pen/QgyewB - 提案をくれてありがとうChad Fawcett。

63
Necrone

他の回答で述べたように、これは次のようにして達成できます。

  • 背景としてぼやけた画像のコピー。
  • フィルタリングできる疑似要素は、コンテンツの後ろに配置されます。

backdrop-filter を使うこともできます。

backdrop-filterと呼ばれるサポートされたプロパティがあります、それは現在 Edge 、SafariそしてiOS Safariでサポートされています（統計については caniuse.com を参照）。

Mozilla devdocs ：から

Backdrop-filterプロパティは、要素の背後の領域をぼかしたりカラーシフトしたりするような効果を提供します。これは、要素の透明度/不透明度を調整することによってその要素を通して見ることができます。

あなたはそれを好きに使うでしょう：

.box {
  -webkit-backdrop-filter: blur(5px); // Use for Safari 9+, Edge 17+ (not a mistake) and iOS Safari 9.2+
  backdrop-filter: blur(5px); // No one supports non prefixed yet
}

統計については caniuse.com を参照してください。

30
hitautodestruct

これを行うには、 _ html _ を再構築する必要があります。背景をぼかすには、要素全体をぼかす必要があります。あなたが背景だけをぼかしたいのであれば、それはそれ自身の要素でなければなりません。

26
posit labs

以下のコードを確認してください。 - 

.backgroundImageCVR{
	position:relative;
	padding:15px;
}
.background-image{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background:url('http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg');
	background-size:cover;
	z-index:1;
	-webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);	
}
.content{
	position:relative;
	z-index:2;
	color:#fff;
}
<div class="backgroundImageCVR">
    <div class="background-image"></div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam erat in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing, quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam at nisl eu felis vulputate porta.</p>
      <p>Fusce ut placerat eros. Aliquam consequat in augue sed convallis. Donec orci urna, tincidunt vel dui at, elementum semper dolor. Donec tincidunt risus sed magna dictum, quis luctus metus volutpat. Donec accumsan et nunc vulputate accumsan. Vestibulum tempor, erat in mattis fringilla, elit urna ornare nunc, vel pretium elit sem quis orci. Vivamus condimentum dictum tempor. Nam at est ante. Sed lobortis et lorem in sagittis. In suscipit in est et vehicula.</p>
    </div>
</div>

6
Sumitava Das

Matthew Wilcoxsonによるソリューションのように、「before」疑似要素を持つ、最新の純粋なCSSのブラウザ用のシンプルなソリューション。値として、親要素（ここでは本体）を介してそれらにアクセスします。

body::before{
  content: ""; /* important */
  z-index: -1; /* important */
  position: inherit;  
  left: inherit;
  top: inherit;
  width: inherit;                                                                               
  height: inherit;  
  background-image: inherit;
  background-size: cover; 
  filter: blur(8px);
}
body{
  background-image: url("xyz.jpg"); 
  background-size: 0 0;  /* image should not be drawn here */
  width: 100%;
  height: 100%;
  position: fixed; /* or absolute for scrollable backgrounds */  
}
5
a99

CSSの.contentタブで、それをposition:absoluteに変更してください。そうでなければ、レンダリングされたページはスクロールできません。

2
saikat

実際に必要なのは、 "filter：blur（≪WhatEverYouWantInPx≫）;"だけです。

body {
  color: #fff;
  font-family: Helvetica, Arial, sans-serif;
}

#background {
  background-image: url('https://cdn2.geckoandfly.com/wp-content/uploads/2018/03/ios-11-3840x2160-4k-5k-beach-ocean-13655.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  
  /* START */
  /* START */
  /* START */
  /* START */
  
  /* You can adjust the blur-radius as you'd like */
  filter: blur(3px);
  
}
<div id="background"></div>

<p id="randomContent">Lorem Ipsum</p>

1
codeWithMe

もちろん、これはCSSによる解決策ではありませんが、CDN Protonをfilterと共に使用できます。

body { 
background: url('https://i0.wp.com/IMAGEURL?w=600&filter=blurgaussian&smooth=1');
}

https://developer.wordpress.com/docs/photon/api/#filter から

1
Max Tusken

言及されたすべての解決策は非常に巧妙ですが、私がそれらを試したときに、すべてがマイナーな問題または潜在的な影響をページ上の他の要素に与えているようでした。

時間を節約するために、私は単純に私の古い解決策に戻りました。私は Paint.NET を使い、半径5〜10ピクセルのEffects、Gaussian Blurに行き、それをページイメージとして保存しました。 :-)

HTML：

<body class="mainbody">
</body

CSS：

body.mainbody
{
    background: url('../images/myphoto.blurred.png');
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed;
}

編集：

私はついにそれを動かしました、しかし解決策は決して簡単ではありません！こちらを参照してください。

1
SharpC

CSS GRIDを使用することで、これはさらに簡単で柔軟になりました。ぼやけた背景（imgbg）とテキスト（h2）を重ねるだけで済みます。

<div class="container">
 <div class="imgbg"></div>
 <h2>
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis enim
  aut rerum mollitia quas voluptas delectus facere magni cum unde?:)
 </h2>
</div>

そしてcss：

.container {
        display: grid;
        width: 30em;
      }

.imgbg {
        background: url(bg3.jpg) no-repeat center;
        background-size: cover;
        grid-column: 1/-1;
        grid-row: 1/-1;
        filter: blur(4px);
      }


     .container h2 {
        text-transform: uppercase;
        grid-column: 1/-1;
        grid-row: 1/-1;
        z-index: 2;
      }
0
Eljeddi Oussema

div{
 background: inherit;
 width: 250px;
 height: 350px;
 position: absolute;
 overflow: hidden;  //adding overflow hidden
}
div:before{
 content: ‘’;
 width: 300px;
 height: 400px;
 background: inherit; 
 position: absolute;
 left: -25px;  //giving minus -25px left position
 right: 0;
 top: -25px;   //giving minus -25px top position 
 bottom: 0;
 box-shadow: inset 0 0 0 200px rgba(255,255,255,0.3);
 filter: blur(10px);
}

0
prajeesh loremine

私はこれを書きませんでしたが、CSS SASSコンパイラを使って部分的にサポートされているbackdrop-filterのためのpolyfillがあることに気づいたので、コンパイルパイプラインがあればそれはうまく達成できます：

https://codepen.io/mixal_bl4/pen/EwPMWo

0
Jonathan

この回答は、動的な高さと画像を使用したMaterial Designの横型カードレイアウトのためのものです。

カードの動的な高さによる画像のゆがみを防ぐには、ぼかしのある背景のプレースホルダ画像を使用して高さの変化を調整します。

説明

  • このカードはクラス{wrapperの<div>に含まれています。これはフレックスボックスです。 
  • カードは2つの要素、リンクでもある画像とコンテンツで構成されています。 
  • リンク<a>、クラスlinkは、 relative の位置にあります。 
  • リンクは2つのサブ要素、プレースホルダー<div> class blurと<img> class picで構成されています。
  • 両方とも absolute に配置され、width: 100%を持ちますが、クラスpicはより高いスタック順序、すなわちプレースホルダーの上に置くz-index: 2を持ちます。
  • ぼかしプレースホルダーの背景画像は、HTMLの インラインスタイル で設定します。

コード

.wrapper {
  display: flex;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.16);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16), 0 1px 1px rgba(0, 0, 0, 0.23);
  background-color: #fff;
  margin: 1rem auto;
  height: auto;
}

.wrapper:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.link {
  display: block;
  width: 200px;
  height: auto;
  overflow: hidden;
  position: relative;
  border-right: 2px solid #ddd;
}

.blur {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}

.pic {
  width: calc(100% - 20px);
  max-width: 100%;
  height: auto;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}

.pic:hover {
  transition: all 0.2s ease-out;
  transform: scale(1.1);
  text-decoration: none;
  border: none;
}

.content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  padding: 20px;
  overflow-x: hidden;
}

.text {
  margin: 0;
}
<div class="wrapper">
  <a href="#" class="link">
    <div class="blur" style="background: url('http://www.planwallpaper.com/static/assets/img/header.jpg') 50% 50% / cover;"></div>
    <img src="http://www.planwallpaper.com/static/assets/img/header.jpg" alt="Title" class="pic" />
  </a>

  <div class="content">
    <p class="text">Agendum dicendo memores du gi ad. Perciperem occasionem ei ac im ac designabam. Ista rom sibi vul apud tam. Notaverim to extendere expendere concilium ab. Aliae cogor tales fas modus parum sap nullo. Voluntate ingressus infirmari ex mentemque ac manifeste
      eo. Ac gnum ei utor sive se. Nec curant contra seriem amisit res gaudet adsunt. </p>
  </div>
</div>

0
Harsha Alva