는 CSS 그라데이션 및 배경 이미지

Question

내가 이미지 위에 투명 그라데이션을 갖고 싶어

을 결합하려고 노력하는, 그래서는하지만 그것은 단지 이미지를 보여줍니다 다음했다

background-image: url(../img/hex-pattern.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(8%,rgba(255,255,255,0)), color-stop(92%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,0.2))); 

어떤 아이디어 왜?

Answer 1

이미지를 먼저 지정하면 이미지가 그라디언트 위에 그려져 완전히 보이지 않게됩니다. 당신은 그라데이션이 상부에 적층되도록 주위를 전환해야합니다 (spec 참조)

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(8%,rgba(255,255,255,0)), color-stop(92%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,0.2))), url(../img/hex-pattern.png); 

뿐만 아니라 그라데이션 접두사의 나머지 부분과 접두어가 하나를 포함하는 것을 잊지 마십시오. 그렇게 할 때, 이는 background-image 선언의 부분 인 url()을 복제하는 것을 의미합니다.

Answer 2

배경의 순서 (z- 색인이라고 생각하는)는 논리적 인 것에서부터 정확히 뒤로입니다. 그것은 나에게 비슷한 불만을 야기 것

http://css-tricks.com/stacking-order-of-multiple-backgrounds/

: 사용자가 설정 한 첫 번째 배경은 상단에있는 것입니다. 링크와 마찬가지로 세로로 생각하면됩니다.

body { 
    background: 
     background1, <-top 
     background2, 
     background3; <-bottom 
}