CSS градиентный фон на <body>, который простирается до 100% ширины и высоты - PullRequest
Новая
       1

CSS градиентный фон на <body>, который простирается до 100% ширины и высоты

6 голосов
/ 17 мая 2011

Так что я хотел бы иметь градиент, который заполняет 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 */
}

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

Ответы [ 3 ]

6 голосов
/ 17 мая 2011

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

4 голосов
/ 17 мая 2011

Вот расширение моего комментария, чтобы использовать SVG вместо префикса производителя и проприетарных расширений. Это уменьшает размер CSS и, благодаря использованию некоторых тактик, позволяет вам использовать один 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 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+ */
}

Если вы хотите сойти с ума, вы можете с помощью base64 закодировать SVG-файл, чтобы вам не приходилось загружать другой файл с сервера, а затем добавить его в качестве класса для повторного использования (не допускайте повторного копирования 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.

1 голос
/ 17 мая 2011

Я также обнаружил, что добавление '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 */
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...