###■やりたいこと
背景画像を「暗く」&「ぼかし」たいです。
###■困ってること
でも、どっちかしかできないのです。↓
https://jsfiddle.net/ys0n5896/
なんでかと言いますと、まず画像には文字が重なっています。
だから:beforeでこのように↓書かいて、画像だけを暗くします。
CSS
1.gazo::before { 2 content: ''; 3 background: inherit; 4 position: absolute; 5 top: -5px; 6 left: -5px; 7 right: -5px; 8 bottom: -5px; 9 z-index: -1; 10 filter: brightness(10%); 11}
しかしこうして画像を暗くすると、今度はぼかしができなくなってしまうんです。
ぼかすためには
filter: blur(50px);
が必要なのですが、それを書くと、上で書いた
filter: brightness(10%);
とぶつかってしまいまうのです。
:beforeがついた同じ要素(.gazo)に、「暗くして(britness)」と「ぼかして(blur)」という違う指示を出さないといけないのです。
###■やってみたこと
【作戦その1】
.gazo
の前に別の要素
.page-gazo
を付けてそれに指示を出してみたけどダメでした。
【作戦その2】
別の指示を出そうとして、
filter: brightness(10%);
じゃなくて
background-color: rgba(0, 0, 0, 0.5);
にしたりしてもダメでした。
どなたかお助けくださいませ。<(_ _)>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/07/24 14:20