Как добавить фоновое изображение градиента сверху вниз? - PullRequest
Новая
       22

Как добавить фоновое изображение градиента сверху вниз?

0 голосов
/ 24 сентября 2011 
body {
    color:#999; 
    background-color:#000; 
    font-family:"Helvetica Neue", Helvetica, arial, sans-serif; 
    font-size:11px; 
    line-height:1.8em;
    background-image: url(../images/bck.jpg); 
    padding:0; 
    margin:0;
}

Как я могу изменить его, чтобы добавить градиентное фоновое изображение сверху вниз сайта?

Ответы [ 2 ]

4 голосов
/ 24 сентября 2011

Mob имеет хороший ответ для CSS3.Однако, если вы хотите использовать изображение для поддержки старых браузеров, но хотите, чтобы оно повторялось только в определенном направлении, просто используйте repeat-x или repeat-y, как показано ниже: 

background: #000 url('../images/bck.jpg') repeat-x;

Если вы 'Я предпочитаю хранить свои правила отдельно, просто добавьте: 

background-repeat:repeat-x;

к своим правилам.Вы также можете использовать 'repeat-y' или 'no-repeat', в зависимости от ваших потребностей.Как вы уже видели, поведение по умолчанию - повторять все.Если вы не беспокоитесь о поддержке предыдущих версий, ответ Mob вам подойдет, поскольку он не зависит от фиксированного размера изображения и всегда будет охватывать необходимое расстояние независимо от высоты вашего контента.

4 голосов
/ 24 сентября 2011 
/* IE10 */ 
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);

/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);

Отредактируйте его так, как вам удобно.

...