CSS 3 Gradient n pikseli od dołu - Webkit/Safari

Question

Czy istnieje sposób na utworzenie gradientu z zatrzymaniem pikseli od dolnej krawędzi elementu?

Na przykład z Moz/Firefox to będzie wyglądać:

-moz-linear-gradient(center bottom , #f00 2%, #d00 31px)

Należy również zauważyć, że nachylenie ma gradient towarzysz zrobić to samo na samej górze okna. Tak naprawdę css wygląda tak dla FF i muszę odtworzyć dla webkita:

background-image: 
     -moz-linear-gradient(center top , rgba(255,0,0,0.75) 2%, rgba(255,0,0,0) 31px), 
     -moz-linear-gradient(center bottom , rgba(255,0,0,0.75) 2%, rgba(255,0,0,0) 31px); 

Answer 1

Nie można tego zrobić przy użyciu aktualnej składni zestawu stron internetowych. Dobra wiadomość! Pojawi się nowa właściwość -webkit-linear-gradient (właśnie ogłoszona na blogu webkita), która zasadniczo pasuje do składni -moz i pozwoli ci to zrobić. Ta składnia powinna stać się definitywną składnią CSS3, więc będziesz mógł w pewnym momencie upuścić w pełni -webkit i -moz. (Stara nieruchomość -webkit gradientem będzie kontynuować pracę na czas nieokreślony, ale nie jest faworyzowany w przyszłości.)

Answer 2

Próbowałeś czegoś takiego?

-webkit-gradient(linear, center bottom , #f00 2%, #d00 31px) 

Mam nadzieję, że this site pomoże ci więcej.

Answer 3

Można użyć -webkit-background-size do wielkości gradientu w pikselach i background-position, aby umieścić go na dole.

Answer 4

Nie dość pewien, czego szukali, ale udaje mi się zatrzymać gradient w pikselach za pomocą tego -

background-size:100% 31px; background-repeat:no-repeat;