Как сделать градиентный фон без изображений? - PullRequest
Новая
       0

Как сделать градиентный фон без изображений?

8 голосов
/ 19 июня 2010

Вот так.в общем, я сделаю изображение шириной в 1 пиксель, затем получу repeat-x.

, но возможно ли сделать такой же фон с CSS3, если да, то скажите мне, как tp делает то же самое из этого*

альтернативный текст http://shup.com/Shup/367066/110519102044-My-Desktop.png

со всеми совместимыми браузерами IE 8, 7, 6, FF, Chrome, Safari, iphone.

Ответы [ 3 ]

9 голосов
/ 19 июня 2010

Практически все браузеры поддерживают градиенты.Вот CSS, который вам нужен: 

.gradient{
    /* For any browser that can't create a gradient  */
    background-color: #EFEFEF;
    /*//mozilla*/
    background: -moz-linear-gradient(top, #efefef, #FFF);
    /* Chrome/Safari     */
    background: -webkit-gradient(linear, left top, left bottom, from(#EFEFEF), to(#FFF));
    /*IE 6/7 */ filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#EFEFEF',EndColorStr='#FFF');
    /*IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#EFEFEF, endColorstr=#FFF)";
}
3 голосов
/ 19 июня 2010

Попробуйте некоторые из генераторов градиента CSS, которые вы можете найти с помощью поиска Google, такие как: http://gradients.glrzad.com/

или

http://www.designdetector.com/demos/css-gradients-demo-1.php

Кроме того, взгляните на учебник по градиенту в Webkit: http://webkit.org/blog/175/introducing-css-gradients/

И Firefox: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/

Теперь - это в виду: Это новый материал - CSS3, который еще не завершен. Браузерная поддержка CSS3 очень актуальна. Вы не собираетесь получать кросс-браузерную поддержку для браузеров, которые вы перечислили. Последние Webkit (Safari, Google Chrome) и Firefox - ваши лучшие ставки. IE поддерживает фильтры. Opera не поддерживает никаких градиентов.

0 голосов
/ 19 июня 2010

Я думаю, что IE 6 и 7 могут не поддерживать CSS3 градиент. Хотя вы можете получить код CSS с этого сайта http://gradients.glrzad.com/

...