얼룩에 대해 밝은 반투명?

Question

최근에 순수한 Javascript 및 scss를 사용하여 프론트 엔드 연구를 테스트하여 Spotify 홈 페이지를 재구성합니다. 여기는 link입니다. 아직 완료되지 않았습니다. 큰-배경 당신은 내와 진짜 사이의 차이를 볼 수있다, 마크 업이

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

내가 섹션 RGBA를 준 것입니다 (RGB 0.7) 배경, 당신은 효과를 볼 수있는 것은 그 밝은하지 않습니다 진짜 앨범으로, 뒷 앨범을 분명히 볼 수 있습니다. 나는 그들의 소스 코드를 파고 있지만, 그 트릭은 찾지 못했습니다.

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