배경에 CSS로 페이드 효과를 만들고 그 위에 이미지를 만드는 방법은 무엇입니까?

만들려면 이미지를 div의 배경으로 설정 한 다음 div에서 “검은 색에서 검은 색으로”그라디언트를 만들어 이미지 위에 표시되도록 할 수 있습니다.

.slideBanner{ background-image: url("../images/Ramsey.jpg"); } .slideBanner{ background: -moz-linear-gradient(left, rgba(0,0,0,0.65) 0%, rgba(255,255,255,0) 48%, rgba(2,2,2,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(0,0,0,0.65) 0%,rgba(255,255,255,0) 48%,rgba(2,2,2,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(0,0,0,0.65) 0%,rgba(255,255,255,0) 48%,rgba(2,2,2,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#a6000000", endColorstr="#020202",GradientType=1 ); /* IE6-9 */ } 

여러 그라디언트 생성기 중 하나에서 다음 그라디언트 코드를 찾았습니다. http://www.colorzilla.com/gradient-editor/

다음 설정 :

실제로 CSS에서 배경을 쉼표로 구분하여 연결할 수 있습니다. 첫 번째는 가장 낮고 두 번째는 그 위에 있습니다. 따라서 먼저 이미지를 설정 한 다음 그래디언트를 설정하기 만하면됩니다.

최신 브라우저에서 블렌드 모드를 사용하여 이미지에 멋진 블렌딩 효과를 보장 할 수도 있습니다.

I “필요한 브라우저 접두사를 생성하는 것은 사용자에게 달려 있습니다 (다른 답변에 링크 된 생성기는 매우 좋은 것입니다).

.slideBanner{ background: url("https://placeimg.com/500/500/nature") 0 0 no-repeat, radial-gradient(ellipse at center, rgba(0,0,0,0) 20%,rgba(0,0,0,1) 100%); background-blend-mode: multiply; } 

JSfiddle 증명 : https://jsfiddle.net/synu8xk1/2/