背景画像にCSSフィルターを適用する方法
-
21-12-2019 - |
質問
検索ページの背景画像として使用している 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 では、背景だけではなくページ全体のスタイルを設定します。画像だけを選択してフィルターを適用する方法はありますか?あるいは、ページ上の他のすべての要素のぼかしをオフにする方法はありますか?
解決
この 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 テキストの謝罪。
更新
他のヒント
追加の要素の必要性を廃止し、コンテンツを他の解決策のように固定/絶対的ではなくドキュメントフロー内に収まるようにします。
を用いて達成された
.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。
他の回答で述べたように、これは次のようにして実現できます。
- 背景としてぼかした画像のコピー。
- フィルタリングしてコンテンツの後ろに配置できる疑似要素。
も使用できます 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 プラットフォームに実装されるのが非常に近づいています。
これを行うには、 html を再構築する必要があります。背景をぼかすために、要素全体をぼかししなければなりません。それであなたが背景だけをぼかしたいのなら、それはそれ自身の要素である必要があります。
下記のコードを確認してください。 -
.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>
.
以下は、Matthew Wilcoxsonの解決策のように、純粋なCSSの最新のブラウザのための簡単な解決策です。
JavaScriptで画像やその他の属性を変更するために疑似要素にアクセスする必要がないようにするには、値としてinherit
を使用し、親要素(ここではbody
)を介してアクセスします。
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 */
}
. CSSの[.content
]タブでは、position:absolute
に変更します。それ以外の場合、レンダリングされたページはスクロールできません。
言及されているすべての解決策は非常に賢いですが、私が試したときに、軽微な問題やページ上の他の要素との影響を潜在的な影響を与えているようです。
時間を節約するために私は単に私の古い解決策に戻った:私は paint.net そして効果に進み、半径5から10ピクセルでガウスをぼかし、ページ画像として保存したばかりです。: - )
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;
}
.
編集:
私はついにそれを働きました、しかし解決策は決して簡単なものではありません!こちらをご覧ください。
- フィルタ:Blur(1px);Firefox、つまりopera では機能しません。
実際に必要なのは「フィルタ」:
blur(«WhatEverYouWantInPixels»);"
.
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>
.
もちろん、これはCSS解決策ではありませんが、CDN Protonがfilter
:
body {
background: url('https://i0.wp.com/IMAGEURL?w=600&filter=blurgaussian&smooth=1');
}
.
私はこれを書いていませんでしたが、CSS SASSコンパイラを使用して部分的にサポートされているbackdrop-filter
用のPolyfillがあったので、コンパイルパイプラインがある場合はそれがうまく達成することができます(それはまたTypeScriptも使用します):
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);
}
.