CSS 배경 이미지가 흰색으로 희미합니다.

Question

콘텐츠가 희미 해지지 않고 흰색에서 배경 이미지가 희미 해지고 있습니다.

이 내가 가진 무엇 :

.my-container { 
 
    position: relative; 
 
    background: white; 
 
    overflow: hidden; 
 
    background-repeat: no-repeat; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-size: cover; 
 
    background-image: url('http://placekitten.com/1500/1000'); 
 
} 
 

 

 
/* You could use :after - it doesn't really matter */ 
 

 
.my-container:before { 
 
    content: ' '; 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 1; 
 
    opacity: 1; 
 
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); 
 
    background-repeat: no-repeat; 
 
    background-position: 50% 0; 
 
    background-size: cover; 
 
}

<div class="my-container"> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 

 
</div>

Answer 1

의사 요소를 사용하는 데 문제가 텍스트와 배경 사이에 삽입하려고하는 것입니다.

적어도 현대적인 브라우저에서는 컨테이너 자체에 여러 배경을 서로 쌓아 놓는 것이 해결책입니다. 문제는 어디

.my-container { 
 
    position: relative; 
 
    background: white; 
 
    overflow: hidden; 
 
    background-repeat: no-repeat; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-size: cover; 
 
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), url('http://placekitten.com/1500/1000'); 
 
}

<div class="my-container"> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 
    <h1>Scotch Scotch Scotch</h1> 
 

 
</div>