明るい半透明のスポット？

Question

最近、純粋なJavascriptとscssを使用して私のフロントエンドのテストをテストするためにSpotifyホームページを再構築しました。ここはlinkです。まだ完成していません。 私はセクションRGBA（RGB、0.7）を得たあなたは私のものとの違いを見ることができますし、本物のビッグ背景である、マークアップは

<div class="bg-main"> 
    <sceiotn class="can-see-the-background-image-1"></section> 
    <sceiotn class="can-see-the-background-image-2"></section> 
</div> 

ある背景、あなたは効果はその明るくないことがわかります実際のものとして、バックアルバムをはっきりと見ることができます。私はそのソースコードを掘り下げますが、私はそのトリックを見つけませんでした。

Answer 1

ソリューション

まず、あなたの要素<div class="bg-main">にbackgroundプロパティにグラデーションを追加します。

.header { 
    height: 760px; 
    width: 100%; 
    text-align: center; 
} 

： backgroundプロパティからグラデーションを削除し、あなたの要素 <header class="header">で、

.bg-main { 
    width: 100%; 
    height: auto; 
    background-attachment: fixed; 
    background: url(../img/bg-albums.png) repeat, 
       linear-gradient(50deg, rgba(255, 65, 105, 1) 0, 
       rgba(124, 38, 248, 1) 100%) repeat 
    position: relative; 
} 

その後

説明
背景色のグラデーションが画像と同じ要素にあるため、Spotifyの表示がはっきりしている理由があります。そのため、画像は背景グラデーションの上に重ねられます。

あなたのサイトではの下に画像があり、その上に薄くなった背景が表示されるため、見えにくくなります。グラデーションの背景の上にイメージを置くと、アルバムアートがはっきりとわかりやすくなります。

final result