내 게임에 정적 검정색 배경을 사용하여이 작업을 가지고

Question

서로 다른 배경을 통해 화면이 튀 http://i.imgur.com/VzLViDB.png

로 당신은 그것이 검은 배경에서 작동하는 것을 볼 수 있습니다, 그러나 우리가 다른 배경 위에있을 때, 우리는 단순히 실제 배경 대신에 검은 색으로 보입니다. 의도 한대로

#waves::before { 
    left:0; 
    background: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 35%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 75%); 
} 

#waves::after { 
    right:0; 
    background: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 35%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 75%); 

} 

김 ... 기술적으로는 일하고 : 나는 같은 기울기를 사용하고 있기 때문에

이는 의미가 있습니다. 나는 그것이 작동하기를 원하는 것처럼 그것을하는 방법을 알아낼 수 없다.

제 목표 : 파형 모서리가 희미 해지는 것처럼 보이도록 div를 페이드 아웃하십시오. 내가 그것을 시도하는 방법

: waves이 사업부, 그래서 내가 before 및 after 사이비 요소를 활용하고, 그것을 요구보다 큰 폭을했다가 (그래서 겹치는 부분이있다), 그리고 페이드 그라데이션을 사용했다.

누구든지이 작업을 수행하는 방법을 알고 있다면 좋을 것입니다.

나는 검색을했는데, 여기서 나는 그라디언트에 대한 아이디어를 얻었습니다.

이미지가 대부분 검은 색이기 때문에

Answer 1

, 당신은 혼합 모드를 사용할 수 있습니다 : 나는

명확히하기 위해 사용 사례 (여러 배경)에 맞는 것 아무것도 찾을 수 없습니다, 이것은 나의 목표입니다 그것을 배경 위에 겹쳐서 표시합니다. 측면

.bkg { 
 
    width: 100%; 
 
    height: 300px; 
 
    background-image: url(http://lorempixel.com/400/200); 
 
    background-size: cover; 
 
} 
 

 
.overlay { 
 
    width: 100%; 
 
    height: 100px; 
 
    position: absolute; 
 
    top: 200px; 
 
    background-image: linear-gradient(to right, black, transparent), linear-gradient(to left, black, transparent), url(https://i.stack.imgur.com/hhk0G.png); 
 
    background-size: 20% 100%, 20% 100%, cover; 
 
    background-position: left center, right center, center center; 
 
    background-repeat: no-repeat; 
 
    mix-blend-mode: screen; 
 
}

<div class="bkg"></div> 
 
<div class="overlay"></div>