PDA

Zobacz pełną wersję : Pionowy gradient w tle w cssie i obrazek top center



czesuav
16-12-2011, 19:03
Witajcie,

Taka mnie idea naszła, co by sobie użyć gradientu w tle za pomocą składni:

-moz-linear-gradient(center top , #kolor1 0%, #kolor2 27%, #kolor3 50%)

I nie wiem, jak do tego dołożyc obrazek, ktory bardzo chce miec w tle, a jeszcze bardziej chcę go mieć wyrównany top center.

Jakoś tak sobie to na szybko składam firebugiem, i nie chce działać zupełnie :(

Szukalem generatroa któremu mozna by tez podac obrazek ale do obrysowania gradientem - nie znalazłem, znalazłem natomiast tag w cssie sugerujący, że gradienty są jako obrazki brane? np background-image... ? Czy źle patrzę?

a_m
16-12-2011, 19:24
#costam{
background:url('../images/bg.png') no-repeat top center, -moz-linear-gradient(top, #ffffff 0%, #0e0e0e 100%) ;
background:url('../images/bg.png') no-repeat top center, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#0e0e0e));
background:url('../images/bg.png') no-repeat top center, -webkit-linear-gradient(top, #ffffff 0%,#0e0e0e 100%);
background:url('../images/bg.png') no-repeat top center, -o-linear-gradient(top, #ffffff 0%,#0e0e0e 100%);
background:url('../images/bg.png') no-repeat top center, -ms-linear-gradient(top, #ffffff 0%,#0e0e0e 100%);
background:url('../images/bg.png') no-repeat top center, linear-gradient(top, #ffffff 0%,#0e0e0e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#0e0e0e',GradientType=0 );
}

ale jak dla ie to zrobić, musisz poszukać

czesuav
19-12-2011, 00:18
Dziękuje za podpowiedz.

W Chromie i FF wyglada dobrze, ładnie działa, natomiast w IE, jak pisałeś nie działa w ogóle. Przynajmniej w najnowszym IE9 i którymś tam IE8.

To dziwne, bo chyba ta linia odpowiada za wyświetlenie tego w IE:


filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#0e0e0e',GradientType=0 );

Wiem to z moich poszukiwan internetowych - nie znalazłem innego rozwiązania niż podałeś. Oczywiście przy zalożeniu łączenia tla jako obrazek i centrowaniu go.

Czy podane pzrez Ciebie gradienty to jakiś szcególny przypaadek?