47

サイトのポップアップにVista/7 のエアログラス スタイルの効果を加えたいのですが、動的にする必要があります。サイトが最新のすべてのブラウザで動作する限り、クロスブラウザ効果でなくても問題ありません。

私の最初の試みは、次のようなものを使用することでした

#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);
}

ただし、予想どおり、ダイアログの内容がぼやけ、背景が鮮明なままになりました。CSS を使用して、半透明の要素の背景をコンテンツではなくぼかす方法はありますか?

4

7 に答える 7

8

鮮明な画像とぼやけた画像の 2 つの背景画像を使用する、シンプルで非常に一般的な手法があります。鮮明な画像を本体の背景として設定し、ぼやけた画像をコンテナーの背景画像として設定します。ぼやけた画像は固定位置に設定する必要があり、位置合わせは 100% 完璧です。以前に使用しましたが、動作します。

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

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

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

CSS だけelement()が Mozilla 以外のブラウザーでサポートされていれば-moz-element()、素晴らしい効果を生み出すことができたでしょう。Mozilla でこのデモを参照してください。

于 2013-01-28T17:03:19.310 に答える
1

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

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

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

于 2013-04-28T15:06:17.293 に答える
1

iframeを介して作成できます...何かを作成しましたが、今のところ唯一の問題は、これらのdivを同期して同時にスクロールすることです...ひどい方法です.2つのWebサイトをロードするようなものですが、私が見つけた唯一の方法... div とオーバーフローを使用することもできます...

于 2013-07-24T01:37:55.660 に答える
1

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

ここでデモを参照してください。

それがどのように行われるかを示すために、簡単なデモを作成する必要があります。ソースをご覧いただければ幸いです。

于 2013-12-15T02:59:21.927 に答える