그라디언트 오버레이가있는 CSS3 배경 - Firefox에서만 그라데이션 사용

Question

CSS 그라데이션을 배경 이미지 위에 오버레이하려고합니다. 파이어 폭스에서 작동하고 있지만 사파리와 크롬에서는 그라데이션이없는 배경 이미지 만 얻는다. 하지에, 내 문제가 웹킷있을 것 이미지 뒤에 그라데이션을 표시

는

가 업데이트 (I 각 줄의 끝에 http://www.colorzilla.com/gradient-editor/를 사용하여 그라데이션 코드, 단순히 추가 URL을() 생성) 꼭 필요한 것처럼, 파이어 폭스는 그렇습니다.

background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(99, 130, 169, 0.7) 100%), url(app/bg.jpg) no-repeat center center fixed; /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0, 0, 0, 0)), color-stop(100%, rgba(99, 130, 169, 0.7))), url(app/bg.jpg) no-repeat center center fixed; /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%,rgba(0,0,0,0.16) 100%), url(app/bg.jpg) no-repeat center center fixed; /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%,rgba(99, 130, 169, 0.7) 100%), url(app/bg.jpg) no-repeat center center fixed; /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%,rgba(99, 130, 169, 0.7) 100%), url(app/bg.jpg) no-repeat center center fixed; /* IE10+ */ 
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%,rgba(99, 130, 169, 0.7) 100%), url(app/bg.jpg) no-repeat center center fixed; /* W3C */ 

Answer 1

, 그것은 훨씬 쉽게 읽고 유지하는 것 (그리고이 문제를 해결합니다).

.foo { 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(99, 130, 169, 0.7))), url('http://lorempixel.com/400/300/'); /* Chrome,Safari4+ */ 
    background-image: -webkit-linear-gradient(top, transparent, rgba(99,130,169,.7)), url('http://lorempixel.com/400/300/'); /* Chrome10+,Safari5.1+ */ 
    background-image: -moz-linear-gradient(top, transparent, rgba(99,130,169,.7)), url('http://lorempixel.com/400/300/'); /* FF3.6+ */ 
    background-image:  -ms-linear-gradient(top, transparent, rgba(99,130,169,.7)), url('http://lorempixel.com/400/300/'); /* IE10+ */ 
    background-image:  -o-linear-gradient(top, transparent, rgba(99,130,169,.7)), url('http://lorempixel.com/400/300/'); /* Opera 11.10+ */ 
    background-image:   linear-gradient(to bottom, transparent, rgba(99,130,169,0.7)), url('http://lorempixel.com/400/300/'); /* W3C */ 

    background-repeat: no-repeat; 
    background-position: 50% 50%; 
    background-attachment: fixed; 
} 

Answer 2

여기에있는 문제는 CSS 주문에서 비롯된 것 같습니다. 나는이 경우 속기 표기법을 사용하는 것이 좋습니다 것입니다 Try Chris Coyier's appraoch instead.

.gradient-bg { 
    background-color: #1a82f7; 
    background-image: url(images/fallback-gradient.png); 
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F2727), to(#1a82f7)); 
    background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7); 
    background-image: -moz-linear-gradient(top, #2F2727, #1a82f7); 
    background-image:  -ms-linear-gradient(top, #2F2727, #1a82f7); 
    background-image:  -o-linear-gradient(top, #2F2727, #1a82f7); 
} 

Answer 3

화상 웹킷의 구배 뒤에 : 여기 동작 예 (: http://jsfiddle.net/joshnh/yyy7V/ 및 데모)이다. WebKit 코드가 다른 색상 인 rgba(0,0,0,0.16)을 사용하는 것입니다. 은 다른 브라우저에 사용 된 것보다을 훨씬 더 찾기 어렵습니다. rgba(99,130,169,0.7).