web-dev-qa-db-ja.com

複数のCSSフィルターを同時に使用しますか？

CSSフィルタを試しています。

そして、ぼかしとグレースケールを同時に使用したいのですが、同じ画像で両方を同時に使用することはできないようです。

ここでフィドルを参照してください...

http://jsfiddle.net/joshmoto/fw0m9fzu/1/

.blur {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
}

.grayscale {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -o-filter: grayscale(1);
    -ms-filter: grayscale(1);
}



.blur-grayscale {
    filter: blur(5px) grayscale(1);
    -webkit-filter: blur(5px) grayscale(1);
    -moz-filter: blur(5px) grayscale(1);
    -o-filter: blur(5px) grayscale(1);
    -ms-filter: blur(5px) grayscale(1);
}
csscss3css-transforms
55
joshmoto

filterという名前の1つのプロパティであるため、スタイルを追加するたびにオーバーライドします。

CSSバージョン1

幸いなことに、背景画像やフィルターなどのプロパティに複数のスタイルを追加できます！これを機能させるには、すべてのフィルタースタイルを1つのスペースで区切られたフィルタープロパティに配置する必要があります。

.grayscale.blur {
    filter: blur(5px) grayscale(1);
}

CSSバージョン2

別の柔軟なソリューションは、「divスープ」を意図的に作成し、htmlスタックに異なるフィルターを設定することです。例えば.

<div class='demo__blurwrap' style='filter: blur(5px);'>
    <div class="demo__graywrap" style='filter: grayscale(1);'>
        <img src="awesome_image.jpeg" alt="">
    </div>
</div>

CSSバージョン3

edit：私はこのバージョンをトランスフォームで書いたばかりであることに気付いたが、同じ考えが当てはまる。

さらに別の解決策は、CSS変数です。私はそれが理想的だとは言いませんが、それは素晴らしい実験です。主な欠点は、多くの変数を宣言する必要があり、transformのデフォルトの長い規則があり、ネストされた変換が確実に破損することです。

// Added just for fun
setInterval(() => {
  yes_this_works_and_one_of_many_reasons_ids_are_bad.classList.toggle('translate');
}, 1000);
setInterval(() => {
  yes_this_works_and_one_of_many_reasons_ids_are_bad.classList.toggle('scale');
}, 1500);
:root {
  --scale: 1;
  --translate: 0px;
}
.box {
  background: blue;
  width: 20px;
  height: 20px;
  transform: 
    scale(var(--scale))
    translate(var(--translate), var(--translate));
  transition: transform .3s;
}
.box.translate {
  --translate: 20px;
}
.box.scale {
  --scale: 3;
}
<div 
  id='yes_this_works_and_one_of_many_reasons_ids_are_bad' 
  class='box scale translate'
></div>

Javascript

最後に、JavaScriptを使用してスタイルをレンダリングする場合は、 getComputedStyle を使用して現在適用されているフィルターを読み取り、ミックスにさらに追加できます。

関連記事-これはアニメーション用であり、多くのブラウザではまだサポートされていません： Additive animations

また、css-tricksに関する別の関連記事： Houdini

将来的には

フィルターを結合できないという問題を克服するために、フィルターが独自のプロパティを取得する場合があります。これは、背景やパディングにあるプロパティと同じように、手書きフォームを作成するようなものになります。

// NON STANDARD, will not work
.grayscale {
    filter-grayscale: 1;
}
.blur {
    filter-blur: 5px;
}
89
René