CSS3 그래디언트 백분율 대신 픽셀로

Question

고정 높이의 머리글, 하위 머리글 및 내용 div를 수용하기 위해 브라우저 창의 크기에 관계없이 동일한 크기의 선형 그라데이션 배경을 만들고 싶습니다. .

내 문제는 페이지를 이동할 때 그라데이션의 크기를 조정하지 않기를 바랍니다. 1 픽셀의 와이드 이미지를 사용하여 동일한 결과를 얻을 수는 있지만, 궁극적으로 로고를 제외하고 가능한 한 이미지가없는 이미지가되도록하고 싶습니다.

비율 정의 그라디언트 대신 픽셀 정의 그라디언트를 사용할 수 있습니까?

Answer 1

가능합니다. 백분율 대신 표준 단위로 대체 할 수 있습니다. 이 예를 참조하십시오

http://dabblet.com/gist/1856111

background: linear-gradient(left, #729fcf 10px, #4c7bb4 20px, #3465a4 63%, #204a87 100%); 

업데이트

을 당신은 위의 예제를 사용하려면 브라우저 접두사를 포함해야합니다.

background-image: -webkit-linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%); 
background-image: -moz-linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%); 
background-image: -o-linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%); 
background-image: -ms-linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%); 
background-image: linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%); 

Answer 2

당신은, 고정 된 크기의 기울기가 크기를 지정합니다 background-size 속성을 사용하려면 다음과 같이 그들은 지정됩니다.