배경 무늬 위의 CSS 그래디언트

Question

패턴 배경과 그 위에 흰색과 검은 색 (투명도가있는) 그래디언트를 만들고 싶습니다. 어떻게 작동시키고 크로스 브라우저로 작동하게할까요? 나는 모질라에서 시작하여 아래 코드를 사용하려고 시도했다 :

background: url(../images/bg_pattern.gif), -moz-linear-gradient(rgba(255, 255, 255, 0.5) 5%, rgba(130, 130, 130, 0.5) 95% 

물론 이것은 작동하지 않는다. 어떻게 해결할 수 있을까요? 코드가 다른 브라우저를 어떻게 찾습니까? IE는 많은 배경과 투명성을 지원합니까? 제 생각에는 대답을하기 전에 IE에서 어떻게 작동하는지 묻습니다.

Answer 1

두 개의 별도 요소가 필요합니다 (하나는 다른 요소 위에 중첩됩니다). 상단의 요소는 그라데이션이어야합니다. 또한 참고로 여기에 단지 외에도 행사에서 이번 주에 출시 크로스 브라우저 그라디언트를 생성하기위한 훌륭한 도구입니다 : 내가 모두를위한 작업 버전이 IE를 제외하고 한

http://www.colorzilla.com/gradient-editor/

Answer 2

. :/나는 내가 그것을 발견 한 곳을 기억하지 못한다. 그래서 나는 적절한 신용을 줄 수 없다. 그러나 여기에 있습니다 :

배경 : -webkit-linear-gradient (rgba (224,147,43, .9), rgba (224,147,43, .8)), # 454040 url (images/grainy2.png) 고정 된 반복; 배경 : -ms-linear-gradient (rgba (224,147,43, .9), rgba (224,147,43, .95))을 고정했습니다. # 454040 url (images/grainy2.png) 배경 : -o-linear-gradient (rgba (224,147,43, .9), rgba (224,147,43, .95))가 고정되었습니다. # 454040 url (images/grainy2.png) 반복됩니다. 배경 : -moz-linear-gradient (rgba (224,147,43, .9), rgba (224,147,43, .95)) 고정, # 454040 url (images/grainy2.png) 반복 고정;

첫 번째 색상은 상단, 두 번째 색상은 하단, 세 번째 색상은 패턴의 색상입니다 (투명 색상으로 줄이는 방법은 확실하지 않음). 마지막으로 당신의 패턴에 직접.

나는 MS가 무엇을 위해 확실하지 않습니다. 내가 말했듯이, 나는 약 몇 ​​달 동안 그것을 사용했지만, 나는 그 근원을 기억하지 못한다. 나는 그것들을 모두 사용하여 그들이 일하는 것을 확인한다. 여전히 IE에는 수정 :/

Answer 3

이 시도하지 :

background-image: url(images/pattern.png), -webkit-radial-gradient(0% 100%, rgb(20,150,254), rgb(119,117,174)); 
    background-image: url(images/pattern.png), -moz-radial-gradient(0% 100%, rgb(20,150,254), rgb(119,117,174)); 
    background-image: url(images/pattern.png), -ms-radial-gradient(0% 100%, rgb(20,150,254), rgb(119,117,174)); 
    background-image: url(images/pattern.png), -o-radial-gradient(0% 100%, rgb(20,150,254), rgb(119,117,174)); 
    background-image: url(images/pattern.png), radial-gradient(circle at 0% 100%, rgb(20,150,254), rgb(119,117,174));