Kolor gradientu CSS zatrzymuje się od końca w pikselach

Question

Pracuję nad projektem HTML/CSS/JS, w którym aplikacja ma stały rozmiar, a elementy muszą być precyzyjnie ustawione, w oparciu o projekty. Ponieważ rozmiar okna jest stały, mogę łatwo pracować z wymiarami pikseli w CSS i nie martwię się o zmianę rozmiaru przeglądarki. Mam też luksus nie martwić się o IE lub Operę: aplikacja musi działać tylko w webkitach i Firefoksie.

W kilku miejscach muszę mieć gradientowe tło przechodzące przez określoną liczbę pikseli. Byłoby to łatwo zrobić coś jak

background-image: linear-gradient(to top, #666666, #000000 60px); 

(i jego -webkit- i -moz- odpowiedniki). To wystarcza dla większości elementów. Jednak istnieje para, w której muszę mieć górną i dolną pozycję pikseli, aby zatrzymać kolory. Jeśli były to punkty procentowe, to można zrobić coś podobnego:

background-image: linear-gradient(to top, #666666, black 60px, transparent 60px, transparent 90%, black 90%, #666666); 

(od szarości do czerni na 60px, to przezroczysty, a następnie czarnego na szary ciągu ostatnich 10%). Jednak muszę osiągnąć to samo z pikselami, ponieważ dany element ma różną wielkość w różnych czasach. Chciałbym uniknąć konieczności użycia JS do ponownego zastosowania gradientu w różnych dynamicznie obliczonych punktach procentowych, jeśli to konieczne.

Więc moje pytanie: czy istnieje sposób, aby określić kolor zatrzymać xpikseli (nie procentowego) od końca?

Answer 1

Nie sądzę, jest to możliwe, ale nakładanie 2 obiekty, jedną z nieprzezroczystych pikseli z dołu, a drugi z pikseli od góry, by nadal unikać JS

.background { 
    position: absolute; 
    background-image: linear-gradient(to top, #666666, black 60px, transparent 60px); 
} 
.overlay { 
    position: relative; 
    background-image: linear-gradient(to bottom, #666666, black 60px, transparent 60px); 
} 

Answer 2

W wierszu poprzedni odpowiedź od po228, ale na tym samym tle elementu.

Set 2 różne gradienty, jeden zaczynając od góry, a druga od dołu

.test { 
 
    background: linear-gradient(to top, red 10px, white 10px), 
 
     linear-gradient(to bottom, blue 10px, white 10px); 
 
    background-size: 100% 50%; 
 
    background-repeat: no-repeat; 
 
    background-position: bottom center, top center; 
 
    height: 150px; 
 
    width: 300px; 
 
}

<div class="test"></div>

Answer 3

Właśnie podszedł to za pośrednictwem wyszukiwarki, myślę, że najlepszym rozwiązaniem było już podane przez Vals przy użyciu wielu obrazów tła - ale zamiast używać background-size i background-position uważam, że jest o wiele bardziej elastyczny i stabilny w użyciu kolorów alfa tutaj (z rgba()), jak w poniższym przykładzie:

background-image: 
    /* top gradient - pixels fixed */ 
    linear-gradient(to bottom, rgb(128,128,128) 0px,rgba(128,128,128,0) 16px), 
    /* bottom gradient - pixels fixed */ 
    linear-gradient(to top, rgb(128,128,128) 0px, rgba(128,128,128,0) 16px), 
    /* background gradient - relative */ 
    linear-gradient(to bottom, #eee 0%, #ccc 100%) ; 

To daje mi dokładnie zachowanie początkowo byłem szukasz. :)

Demo: http://codepen.io/Grilly86/pen/LVBxgQ