11

divある位置に固定された を作成して半透明にし、その背後のコンテンツを部分的に表示してぼかしたいと思います。私が探しているスタイルは、 Apple の Web サイトdivの「すべてを表示」のサムネイルに似ています。

私にできることは調整することだけですがopacity: 0.9、 の下にあるコンテンツをぼかすことはできませんdiv。

注: のdiv位置は固定で、背景はスクロールします。スクロールする背景はテキストと写真のミックスです。

4

7 に答える 7

23

CSS

CSS 3 にはぼかしフィルターがあります ( 2014 年 11 月の時点では webkit のみ):

-webkit-filter: blur(3px); /*chrome (android), safari (ios), opera*/

IE 4-9 は非標準フィルターをサポートします

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3')

ぼかしやその他のフィルターの素敵なデモをこちらでご覧ください。

Webkit CSS フィルターのぼかしの例

今後の参考のために、ここに CSS フィルターの互換性表を示します。Firefox は v35+ で機能を取得しているようですが、IE11 でさえ互換性がないようです。

SVG

代替手段は svg を使用することです (基本的に IE9 以降では安全です):

filter: url(blur.svg#blur);

SVG:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
   <filter id="blur">
       <feGaussianBlur stdDeviation="3" />
   </filter>
</svg>

jsFiddle デモ

Javascript

JavaScript を使用すると、ブラウザとの互換性が最も高くなりますが、通常はパフォーマンスが最も遅くなり、js が複雑になります。

于 2013-06-13T14:44:47.957 に答える
8

CSS 画像フィルターを使用できます。

-webkit-filter: blur(2px);
filter        : blur(2px);

CSS 画像フィルターの詳細:

デモ: JSFIDDLE ぼかしフィルターの例

しかし実際には、彼らは前処理された JPG を使用しており、それを正しい位置にオーバーレイとして使用しているだけです。

#background {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 600px;
    height: 600px;

    background-image: url(http://images.apple.com/home/images/osx_hero.jpg);
    background-position: 0 0;
}
#blur {
    position: absolute;
    left: 50px;
    top: 50px;
    width: 120px;
    height: 500px;

    background-image: url(http://images.apple.com/home/images/osx_hero_blur.jpg);
    background-position: -50px -50px;
}

<div id="background">
    <div id="blur"></div>
</div>

デモ: JSFIDDLE CSSぼかしテクニック

于 2013-06-13T14:54:38.763 に答える
2

これは、backdrop-filter. 現在、事実上、まったくサポートされていません。ブラウザーのサポートについては、http: //caniuse.com/#feat=css-backdrop-filterを参照してください。

この CSS フィルターは、おかしなビジネスやハックなしで曇りガラスを処理します。それはただそれをするでしょう。

誰かが Vine でデモを録音しましたが、とても良さそうです。彼らは毎晩 Safari を使用して CSS フィルターにアクセスしていました。https://vine.co/v/OxmjlxdxKxl

于 2015-07-25T15:43:09.720 に答える
2

あなたは私を試してみたいと思ったので、私はそうしました。ここで例をチェックしてください:

http://codepen.io/Edo_B/pen/cLbrt

使用:

  1. HW アクセラレーション CSS フィルター
  2. クラス割り当ておよび矢印キーイベント用の JS
  3. 画像の CSS クリップ プロパティ

それでおしまい。

また、キャンバスを使用して現在の dom をコピーし、それをぼかしている場合、これはどの画面でも動的に実行できると思います。

于 2013-07-20T12:48:42.263 に答える
1

同じ画像（またはその一部）を不透明度.9で数ピクセル左/右/上/下に置くだけです-出来上がり

于 2014-05-02T17:30:44.927 に答える
-2

まず第一に、OPは背景がスクロールすると述べています。利用可能な回答のどれも、実際にスクロールを許可していません。HTMLの設定方法に基づいて、それは不可能です。しかし、famous/angular を使用すると、複数のレンダリング エンジンを使用してこの効果を実現できます。私はそれをここに構築しました。

その背後にあるアイデアは、サイトの 2 つのレンダリングです。1 つは、ぼやけているヘッダー バージョンです。もう一つは体です。私は Famous/Angular を使用し、テンプレートを使用して頭と体でテンプレートをレンダリングしました。物事が一致するように、ヘッダーにはヘッダーの高さのオフセットが必要です。実際のコードをすぐにこことサイトに投稿する予定です。

于 2015-04-22T22:21:40.907 に答える