背景画像だけを「暗く」しつつ「ぼかし」もいれたいのに、同じ要素に違う指示をする以外に思いつきません。

Question

###■やりたいこと
背景画像を「暗く」&「ぼかし」たいです。

###■困ってること
でも、どっちかしかできないのです。↓
https://jsfiddle.net/ys0n5896/

なんでかと言いますと、まず画像には文字が重なっています。
だから:beforeでこのように↓書かいて、画像だけを暗くします。

.gazo::before { 
  content: '';
  background: inherit;
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
  filter: brightness(10%);
}

しかしこうして画像を暗くすると、今度はぼかしができなくなってしまうんです。

ぼかすためには
filter: blur(50px);
が必要なのですが、それを書くと、上で書いた
filter: brightness(10%);
とぶつかってしまいまうのです。

:beforeがついた同じ要素（.gazo）に、「暗くして（britness）」と「ぼかして（blur）」という違う指示を出さないといけないのです。

###■やってみたこと
【作戦その１】
.gazo
の前に別の要素
.page-gazo
を付けてそれに指示を出してみたけどダメでした。

【作戦その２】
別の指示を出そうとして、
filter: brightness(10%);
じゃなくて
background-color: rgba(0, 0, 0, 0.5);
にしたりしてもダメでした。

どなたかお助けくださいませ。<(_ _)>

Answer 1

filter: brightness(10%) blur(50px);

と1行で書くだけの話に思えます。

Comments

[退会済みユーザー]

覚えておきます。汗
ありがとうございます！

Answer 2

/* // *//* CSSのコメントは「//」ではありません */

【css filter 複数 - Google 検索】
https://www.google.co.jp/search?num=100&safe=off&q=css+filter+%E8%A4%87%E6%95%B0

Comments

[退会済みユーザー]

そう検索すればよかったのか…
助かりました。いつもありがとうございます。