web-dev-qa-db-ja.com

CSSによる背景ぼかし

自分のサイトのポップアップにVista/7-aero-glass-style効果が必要です。動的である必要があります。サイトがworksである限り、これはクロスブラウザ効果ではなく、すべての最新のブラウザで問題ありません。

私の最初の試みは

#dialog_base {
  background:white;
  background:rgba(255,255,255,0.8);

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

しかし、予想どおり、これにより、ダイアログのcontentがぼやけてしまいましたであり、背景が鮮明に保たれています。 CSSを使用して、コンテンツの代わりに半透明の要素の背景をぼかす方法はありますか？

csspopupaero-glass
45
Supuhstar

OCT。 2016 UPDATE

-moz-element()プロパティはFFを除く他のブラウザでは広くサポートされていないようですので、コンテナのコンテンツに影響を与えずにぼかしを適用するさらに簡単な手法があります。この場合、svg blurフィルターと組み合わせて、擬似要素の使用が理想的です。

擬似要素を使用してデモを確認

（デモはFF v49でテストされました、Chrome v53、Opera 40-IEはcssでもぼかしをサポートしていないようですまたはsvgフィルター）

（これまでのところ）jsプラグインなしで背景にぼかし効果を持たせる唯一の方法は、svgぼかしフィルターと組み合わせて-moz-element()プロパティを使用することです。 -moz-element()を使用すると、要素を別の要素の背景画像として定義できます。次に、svgぼかしフィルターを適用します。オプション：背景がfixedの位置にある場合、スクロールにjQueryを利用できます。

こちらのデモをご覧ください

私はそれが非常に複雑な解決策であり、FFに制限されることを理解しています（element()は現時点でMozillaに_-moz-element()プロパティでのみ適用されます）、少なくとも過去には 多少の努力 Webkitブラウザーで実装し、できれば実装すること 将来 。

34
otinanai

疑似要素を使用して、背景と同じ画像でコンテンツの背景として配置できますが、新しいCSS3フィルターでぼかします。

ここで実際にそれを見ることができます： http://codepen.io/jiserra/pen/JzKpx

選択をカスタマイズするために作成しましたが、背景ぼかし効果を追加しました。

17
Juan Ignacio Serra

Safari 9.0以降では、backdrop-filterプロパティを使用できます。

HTML

<div>backdrop blur</div>

CSS

div {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

または、サポートのないブラウザに異なる背景色が必要な場合：

div {
    background-color: rgba(255, 255, 255, 0.9);
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    div {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        background-color: rgba(255, 255, 255, 0.5);  
    }
}

JSFiddle

Mozilla開発者：backdrop-filter

CanIUse

17
hovado

2つの背景画像を使用することにより、シンプルで非常に一般的な手法があります。鮮明な画像とぼやけた画像です。鮮明な画像をボディの背景として設定し、ぼやけた画像をコンテナの背景画像として設定します。ぼやけた画像は固定位置に設定する必要があり、位置合わせは100％完全です。私は前にそれを使用し、それが動作します。

body {
    background: url(yourCrispImage.jpg) no-repeat;
}

#container {
    background: url(yourBlurryImage.jpg) no-repeat fixed;
}

次のフィドルで実際の例を見ることができます：http://jsfiddle.net/jTUjT/5/。ブラウザのサイズを変更して、アライメントが失敗しないことを確認してください。

Mozillaのelement()以外の他のブラウザでCSS -moz-element()のみがサポートされている場合、素晴らしい効果を作成できます。こちらをご覧ください Mozillaでのデモ .

8
otinanai

コンテンツ用にサイズ設定された空の要素を背景として使用し、ぼやけた要素の上にコンテンツを配置します。

#dialog_base{
  background:white;
  background:rgba(255,255,255,0.8);

  position: absolute;
  top: 40%;
  left: 50%;
  z-index: 50;
  margin-left: -200px;
  height: 200px;
  width: 400px;

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

#dialog_content{
  background: transparent;
  position: absolute;
  top: 40%;
  left: 50%;
  margin-left -200px;
  overflow: hidden;
  z-index: 51;
}

Background要素はcontent要素の内側に配置できますが、その逆はできません。

<div id='dialog_base'></div>
<div id='dialog_content'>
    Some Content
    <!-- Alternatively with z-index: <div id='dialog_base'></div> -->
</div>

コンテンツのサイズが常に一定ではない場合、これは簡単ではありませんが、機能します。

1
Devon

あなたはiframeを介してそれを作ることができます...私は何かを作りましたが、今のところ私の唯一の問題はそれらのdivを同期して同時にスクロールすることです...あなたが2つのウェブサイトをロードするような恐ろしい方法ですが、私が見つけた唯一の方法...あなたもdivとオーバーフローを扱うことができると思います...

1
Danton Heuer

どの方法でそれを動的にしたいですか？ポップアップを背景に正常にマッピングするには、2つの背景を作成する必要があります。 element()または-moz-element()とフィルターの両方を使用する必要があります（Firefoxでは、filter: url(#svgBlur)のようなSVGフィルターを使用してください。Firefoxは-moz-filter: blur()をまだサポートしていないのですか？）。執筆時点ではFirefoxでのみ機能します。

こちらのデモをご覧ください

私はまだ簡単なデモを作成して、それがどのように行われるかを示す必要があります。ソースをご覧ください。

1
Alan Gresley