背景画像にCSSフィルターを適用する方法

Question

検索ページの背景画像として使用している JPEG ファイルがあり、その中で作業しているため CSS を使用して設定しています。 バックボーン.js コンテキスト:

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

CSS3のぼかしフィルターを適用したい のみ 背景に追加しましたが、その 1 つの要素だけをスタイルする方法がわかりません。私が試してみると:

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

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

Answer 1

この pen

背景画像用の2つの異なるコンテナ、もう一方があなたのコンテンツのために使用する必要があります。

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

両方ともposition: fixedとleft: 0; right: 0;で配置されています。表示の違いは、要素に対して異なる設定されたz-index値から来ています。

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

.

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

.

Lorem Ipsum テキストの謝罪。

更新

Matthew Wilcoxson http://codepen.io/akademy/pen/flkzb

Answer 2

ペン

追加の要素の必要性を廃止し、コンテンツを他の解決策のように固定/絶対的ではなくドキュメントフロー内に収まるようにします。

を用いて達成された

.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%の左側と上です。これはあなたの背景をTADに拡大するでしょう - しかし、エッジから立ち上がるしっかりした色の出血はありません。

更新されたペン：> https://codepen.io/anon/pen/qgyewb - 提案のためにおかげでChad Fawcett。

Answer 3

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

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

も使用できます backdrop-filter

というサポートされているプロパティがあります。 backdrop-filter, 、そしてそれは現在、Chrome 76でサポートされています、 角, 、Safari、および iOS Safari (「 caniuse.com 統計用）。

から Mozilla 開発ドキュメント:

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

見る caniuse.com 使用統計用。

次のように使用します。

.background-filter::after {
  -webkit-backdrop-filter: blur(5px); /* Use for Safari 9+, Edge 17+ (not a mistake) and iOS Safari 9.2+ */
  backdrop-filter: blur(5px); /* Supported in Chrome 76 */

  content: "";
  display: block;
  position: absolute;
  width: 100%; height: 100%;
}

.background-filter {
  position: relative;
}

.background {
  background-image: url('https://upload.wikimedia.org/wikipedia/en/6/62/Kermit_the_Frog.jpg');
  width: 200px;
  height: 200px;
}

<div class="background background-filter"></div>

更新情報 (2019/12/06):クロムは同梱されます backdrop-filter バージョン 76 ではデフォルトで有効になっています。 2019 年 7 月 30 日に発売予定.

更新 (2019/01/06):Mozzilla Firefox チーム 発表しました 間もなく実装に向けた作業が開始される予定です。

更新 (2019/05/21):クロム 発表されたばかり backdrop-filter 「実験的な Web プラットフォーム機能を有効にする」フラグを有効にしなくても、Chrome Canary で使用できます。これはつまり backdrop-filter すべての Chrome プラットフォームに実装されるのが非常に近づいています。

Answer 4

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

Answer 5

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

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

.