CSS3 Gradienty po pikselach, zamiast wartości procentowej

Question

Chcę utworzyć liniowe tło gradientowe, które pasuje tak samo bez względu na rozmiar okna przeglądarki, aby pomieścić nagłówek, pod-nagłówek i element div o stałej wysokości .

Mój problem polega na tym, że nie chcę, aby gradient skalował się podczas przesuwania strony. Mógłbym użyć obrazu o szerokości 1px, aby uzyskać taki sam wynik, jak sądzę, ale ostatecznie chcę, aby strona była jak najbardziej wolna od wizerunku, z wyjątkiem logo.

Czy możliwe jest użycie gradientu zdefiniowanego w pikselach zamiast gradientu zdefiniowanego procentowo?

Answer 1

Tak, możesz. Możesz zastąpić standardowe jednostki zamiast wartości procentowych. Zobacz ten przykład:

http://dabblet.com/gist/1856111

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

Aktualizacja

Musisz zawierać przedrostki przeglądarek w celu skorzystania z powyższego przykładu. Będą one być określone w następujący sposób:

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

Jeśli chcesz mieć gradient stałym rozmiarze, należy użyć właściwości background-size aby określić jej wielkość.