2012-11-29 4 views
0

나는 CSS 여러 배경 + 그라디언트를 사용하는 방법은 무엇입니까?

background: -moz-linear-gradient(top, rgba(248,246,247,1) 0%, rgba(248,246,247,0) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(248,246,247,1)), color-stop(100%,rgba(248,246,247,0))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, rgba(248,246,247,1) 0%,rgba(248,246,247,0) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, rgba(248,246,247,1) 0%,rgba(248,246,247,0) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, rgba(248,246,247,1) 0%,rgba(248,246,247,0) 100%); /* IE10+ */ 
background: linear-gradient(to bottom, rgba(248,246,247,1) 0%,rgba(248,246,247,0) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f6f7', endColorstr='#00f8f6f7',GradientType=0); /* IE6-9 */ 

지금 내가 할

background: url('../images/letter_head.png') left top repeat-x, #f8f6f6; 

어떻게 그라데이션 배경 위에 배경을 추가 할

그라데이션의 하단에 투명 CSS를 graident 발생기에서이 코드를 가지고 둘 다 결합 해?

답변

0

이 링크는 그냥 각 규칙에 이미지의 URL을 앞에 추가.

background: -moz-linear-gradient(top, rgba(248,246,247,1) 0%, rgba(248,246,247,0) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(248,246,247,1)), color-stop(100%,rgba(248,246,247,0))); /* Chrome,Safari4+ */ 
... 
background-image:url("someurl"); 
: 당신이 당신의 각 규칙에 url(etc)을 추가하는 기분하지 않는 경우

background: url(someurl), -moz-linear-gradient(top, rgba(248,246,247,1) 0%, rgba(248,246,247,0) 100%); /* FF3.6+ */ 

또는, 당신은 단지 하나의 background-image 규칙을 지정할 수 있습니다

0

CSS

.bg{ 
    width:800px; height:750px; 
    background: #38BAC9 url(http://www.google.com/logos/2012/india12-hp.jpg) 10% no-repeat; 
    background:url(http://www.google.com/logos/2012/india12-hp.jpg) center no-repeat, -webkit-gradient(linear, 0% 0%, 0% 100%, from(#57BEED), to(#38BAC9)); 
    background:url(http://www.google.com/logos/2012/india12-hp.jpg) center no-repeat, -moz-linear-gradient(top, #57BEED 0%, #38BAC9 100%);  
}​ 

DEMO

확인 자세한 내용

http://userinterfacehome.blogspot.in/2012/09/css-multiple-background.html

관련 문제