CSS를 사용하여 배경으로 두 가지 그라디언트를 표시 하시겠습니까?

내 사이트의 백그라운드에서 2 가지 다른 그라디언트를 사용하고 싶습니다. 하나의 그라디언트를 호출하기 위해 다음을 사용하고 있습니다. 하나 이상의 그라디언트를 선언하려면 어떻게해야합니까? (즉, 왼쪽에는 다른 그라디언트를, 오른쪽에는 다른 그라디언트를 표시하려면 어떻게해야합니까?)CSS를 사용하여 배경으로 두 가지 그라디언트를 표시 하시겠습니까?

body 
{ 

    background: -webkit-gradient(linear, left top, left bottom, from(#E0E0E0), to(#fff)); 
    background: -moz-linear-gradient(top, #E0E0E0, #fff); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E0E0E0', endColorstr='#ffffff'); 


}

그래서 배경의 왼쪽면이 다른 색 그라디언트가되도록하고 싶습니다.

아이디어가 있으십니까?

건배!

출처

2012-06-15 Franco

문제가 무엇인가와 :before 및 :after :)의 학대를? –

@sandeep 및 OP 편집 - 2 -webkit-linear-gradient' 값을 2 줄 또는 이미 webkit에 입력 한 다음 moz? 내 대답은 내가 2 웹킷 값을 봤다고 가정하지만 지금은 의심 스럽다. (나를 위해 커피 하나 더!) – FelipeAls

죄송합니다. 내 자신을 분명히하지 않았다고 생각합니다. 질문을 업데이트했습니다. – Franco

<void after update of your question> 
You should use a [multi-background](http://www.w3.org/TR/css3-background/#layering) 
declaration where the first and second values are separated by a comma like 
`background: value1, value2;`. 

Also the background on top (here a gradient) should whether not recover entirely the 
first one or have some transparency, obviously. 
</void>

다음은 HTML 코드에서 추가 요소를 생성하지 않고에 배경을 고수하는 뭔가를 만들 :before 의사를 사용하여 바이올린입니다. 브라우저에서 linear-gradient을 지원하는 경우 :before도 지원되므로 AFAIK는 문제가되지 않습니다.

http://jsfiddle.net/URWD8/

주요 트릭 박스 절반 크기를 생성하고 잘 위치 (다음 시행 착오 I 인정하여 Z- 색인이 절대 위치 상자 ... 상기 텍스트 콘텐츠를 가짐)된다.

-o-은 여기에 없으며 IE10 및 다른 브라우저의 이후 버전에 대해서는 linear-gradient 접두사가없는 것이어야합니다. http://caniuse.com/#feat=css-gradients

OT를 참조하십시오
재미와/또는 http://css-tricks.com/examples/ShapesOfCSS/ 및 http://ie7nomore.com/#CSS2 (두 페이지에 그 pseudos 검색)

출처

2012-06-15 07:08:39 FelipeAls

좋은 해결책! 감사! – Franco

CSS를 사용하여 배경으로 두 가지 그라디언트를 표시 하시겠습니까?

답변

관련 문제