web-dev-qa-db-ja.com

CSSを使用してすりガラス効果を作成する方法は？

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

できることは、adjust opacity: 0.9しかし、divの下にあるコンテンツをぼかすことはできません。

注：divの位置は固定されており、背景がスクロールします。渦巻く背景は、テキストと写真の混合です。

htmlcssimage-processingtransparencycss-filters
10
user2463516

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 filter blur example

将来の参照用に 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 Demo

Javascript

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

23
patrickf

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

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

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

デモ： [〜＃〜] jsfiddle [〜＃〜]Blur filter exemple

しかし実際には、事前処理された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 blur technique

8
Vitim.us

あなたは私に試してみたいと思わせたので、ここで例をチェックしてみました：

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

を使用して：

  1. HW Accelerated CSSフィルター
  2. クラス割り当てと矢印キーイベントのJS
  3. Images CSS Clipプロパティ

それでおしまい。

また、canvasを使用して現在のdomをコピーしてぼかしをかけると、任意の画面でこれを動的に実行できると考えています。

2
Edo Ben Shitrit

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

1
Humer IT

これはbackdrop-filterと呼ばれるCSSフィルターとして今後登場するブラウザーになります。現在のところ、それに対するサポートはほとんどありません。ブラウザのサポートについては、以下を参照してください： http://caniuse.com/#feat=css-backdrop-filter

このCSSフィルターは、おもしろいビジネスやハッキングなしで曇りガラスを処理します。ただやるだけです。

誰かがそれのデモをVineで録音しましたが、本当に見栄えがいいです。彼らは毎晩Safariを使用してCSSフィルターにアクセスしていました。 https://Vine.co/v/OxmjlxdxKxl

1
williamle8300