質問: 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を使用して、コンテンツの代わりに半透明の要素の背景をぼかす方法はありますか?
回答: コンテンツ用にサイズ設定された空の要素を背景として使用し、ぼやけた要素の上にコンテンツを配置します。#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> コンテンツのサイズが常に一定ではない場合、これは簡単ではありませんが、機能します。