css - CSSでblendなどを使用して、ボディの背景画像とフッターの色の両方を表示します

Question

Photoshop のようなイメージ ブレンドを使用するサイトhttp://change.isがあります。

このサイトでは、フッターに異なる色を使用して、不透明度が 0.7 の 1 番目と 2 番目の色、0.9 の 3 番目の色、0.5 の最後の色の 4 つの部分に分けています。最初の 3 つの色は不透明度が 1 に近いため、ボディの背景グリッドが 4 つ目のように適切に表示されません。しかし、私はそれらの不透明度を変更したくありません。

私はのように示す必要があります

しかし、このスクリーンショットでは、不透明度を 0.5 に減らしたので、フッターの色は希望どおりに見えませんが、最初と 2 番目の色には不透明度 0.7、3 番目の色には 0.9 の同じ色を使用する必要があります。

Answer 1

つまり、あなたがやろうとしているのは、青、ピンク、黄色の下にグリッドをもっと表示することですが、不透明度を変更したくありません。表示されるグリッドボックスの数を制御できるように、色を使用してグリッドをフォトショップし、背景として設定して-xを繰り返すことができます。