Блог

Итак, я хотел бы иметь градиент, который заполняет 100% фона веб-страницы. Для браузеров, которые не могут с этим справиться, подойдет сплошной цвет.

вот мой текущий css:

 html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
background-repeat: no-repeat;
background: #afb1b4; /* Old browsers */
background: -moz-linear-gradient(top, #afb1b4 0%, #696a6d 100%) no-repeat; /* FF3.6  */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#afb1b4), color-stop(100%,#696a6d)); /* Chrome,Safari4  */
background: -webkit-linear-gradient(top, #afb1b4 0%,#696a6d 100%); /* Chrome10 ,Safari5.1  */
background: -o-linear-gradient(top, #afb1b4 0%,#696a6d 100%); /* Opera11.10  */
background: -ms-linear-gradient(top, #afb1b4 0%,#696a6d 100%); /* IE10  */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#AFB1B4', endColorstr='#696A6D',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #afb1b4 0%,#696a6d 100%); /* W3C */
}
  

Казалось, что это сработало, пока на странице было мало контента, но поскольку я дополнил страницу дополнительным контентом, навигацией и так далее, внизу теперь немного белого. может быть, 100 пикселей или около того. Я делаю это неправильно? Нужно ли мне где-то компенсировать некоторые отступы?

Избавьтесь от своих height: 100% объявлений. Похоже, что установка высоты на 100% просто устанавливает ее равной 100% области просмотра, а не на самом деле 100% самой страницы.

Вот расширение моего комментария, чтобы использовать SVG вместо префикса поставщика и проприетарных расширений. Это уменьшает размер CSS и, при использовании некоторых тактик ingenius, может позволить вам использовать один SVG-файл в качестве пакета спрайтов для градиентов (уменьшая общее количество HTTP-запросов).

Сначала создайте свой SVG-файл и градиент (в соответствии со спецификациями вашего вопроса):

 <?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="1" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <g>
        <defs>
            <linearGradient id="ui-bg-grad" x1="0%" x2="0%" y1="0%" y2="100%">
                <stop offset="0%" stop-color="#afb1b4" />
                <stop offset="100%" stop-color="#696a6d" />
            </linearGradient>
        </defs>
        <rect fill="url(#ui-bg-grad)" x="0" y="0" width="100%" height="500"/>
    </g>
</svg>
  

Далее, вот ваше новое объявление:

 html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-repeat: no-repeat;
    background-color: #afb1b4; /* Old browsers: anything not listed below */
    background-image: url("grad.svg"); /** Browsers that support SVG: IE9 , FF4 , Safari 4 (maybe 5), Opera 10 
}
  

Теперь, если вы хотите поддерживать старые браузеры с изображениями в формате png, вы можете внести одно небольшое изменение. Поскольку любое свойство, которое использует url() , не поддерживает отображение подсказок (например, свойство @font-face ‘s src ), вам придется немного изменить правило.

 html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-repeat: no-repeat;
    background-color: #afb1b4; /* Image fails to load, or FF3.5 */
    background-image: url("grad.png"); /* Old browsers: anything not listed below or above */
}

body:not(foo) { /* most browsers that support :not() support SVG in url(), except FF3.5 */
    background-image: url("grad.svg"); /* Browsers that support SVG: IE9 , FF4 , Safari 4 (maybe 5), Opera 10  */
}
  

Если вы хотите сойти с ума от глупости, вы могли бы закодировать SVG-файл в base64encode, чтобы вам не приходилось загружать другой файл с сервера, а затем добавлять его в качестве класса для повторного использования (предотвратите повторное использование base64 в нескольких местах).

 .svg-sprite:not(foo)
{
    background-size: 100% 100%;
    background-image: url("data:image/svg xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSI1MDAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Zz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9InVpLWJnLWdyYWQiIHgxPSIwJSIgeDI9IjAlIiB5MT0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjYWZiMWI0IiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzY5NmE2ZCIgLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCBmaWxsPSJ1cmwoI3VpLWJnLWdyYWQpIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSI1MDAiLz48L2c PC9zdmc ");
}

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-repeat: no-repeat;
    background-color: #afb1b4; /* Image fails to load, or FF3.5 */
    background-image: url("grad.png"); /* Old browsers: anything not listed below or above */
}
  

Затем обновите свой body тег, чтобы включить .svg-sprite класс.

Я также обнаружил, что добавление ‘fixed’ в конец, похоже, помогло:

 body {
margin: 0;
padding: 0;
background-repeat: no-repeat;
background: #afb1b4; /* Old browsers */
background: -moz-linear-gradient(top, #afb1b4 0%, #696a6d 100%) fixed no-repeat; /* FF3.6  */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#afb1b4), color-stop(100%,#696a6d)) fixed; /* Chrome,Safari4  */
background: -webkit-linear-gradient(top, #afb1b4 0%,#696a6d 100%) fixed; /* Chrome10 ,Safari5.1  */
background: -o-linear-gradient(top, #afb1b4 0%,#696a6d 100%) fixed; /* Opera11.10  */
background: -ms-linear-gradient(top, #afb1b4 0%,#696a6d 100%) fixed; /* IE10  */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#AFB1B4', endColorstr='#696A6D',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #afb1b4 0%,#696a6d 100%) fixed; /* W3C */
}