6

ここに画像の説明を入力

Yahoo の新しい電子メール インターフェイスのアップグレードで、GUI ウィンドウの 1 つの背景画像にぼかし効果が使用されていることに気付きました。私はこの効果が本当に好きで、以前は JavaScript と CSS では完全に不可能だと思っていました。

これはどのように行われますか？

これは実際に興味深いケースです。ページが最初にロードされたとき、完全な画像はぼやけており、ソースを見ると、画像のぼやけたバージョンが保存されていることがわかります. ページが読み込まれた後、ぼやけたままの GUI 領域を除いて、ページはクリアになります。また、Chrome Web ツールを開くと、ページ全体の背景が再びぼやけます。

私はまだこれを理解していません。

4

1 に答える 1

7

コメントでは、人々は CSS3 ぼかしフィルターについて言及しています。しかし、あなたは Yahoo が 2 つのバージョンの画像を提供していると述べました。2 つの画像の理由は、おそらく CSS3 ぼかしフィルターを使用せずに実装したためです (または、少なくともぼかしフィルターをサポートしていないブラウザーのフォールバックがあるためです)。1999 年にさかのぼってこのエフェクトを実装することもできたでしょう。

そこで、古き良き CSS ハッカーを使用して、CSS フィルターを使用せずに「古典的な」方法でそれを行う方法を次に示します。

この効果の基本的な考え方は、スライディング ウィンドウ手法とスプライトに似ています。これにより、css の背景の配置を使用して、背景画像の一部を表示または非表示にします。

この効果の構造は単純です。

 ______________________________________
| main background image                |
|                                      |
|    _____________________             |
|   | inner div with      |            |
|   | blurry background   |            |
|   | image               |            |
|   |                     |            |
|   |                     |            |
|   |_____________________|            |
|                                      |
|______________________________________|

さて、ここにトリックがあります：

  1. メインの背景は単純に に設定されてい0 0ます。異常なし
  2. 内側の div には x と y のオフセットがありx yます (上、左、マージン、またはパディングを介して)
  3. 内側の div の背景はぼやけた画像を使用します。
  4. 内側の div をメインの背景の一部のように見せるには、background-position を-x -y

簡単な例

#main {
    position: absolute;
    background: url("background.jpg");
}
#inner {
    position: absolute;
    left: 20px;
    top: 30px;
    background: url("blurry_background.jpg") -20px -30px;
}
于 2013-10-20T09:26:25.767 に答える