1. дома
  2. Вопрос и ответ
  3. CSS-градиент фона, повторяющийся при переполнении

CSS-градиент фона, повторяющийся при переполнении

2015-02-23 2 views
1

Я использую градиент в качестве фона, и он растягивается до конца страницы, однако после прокрутки/переполнения он начинает повторяться. Как я могу растянуть градиент до нижней части страницы даже после прокрутки?CSS-градиент фона, повторяющийся при переполнении

html 
{ 
    height:100%; 
    width:100%; 
} 

body 
{ 
    margin:0; 
    padding:0; 
    width:100%; 
    height:100%; 
    min-height:100%; 
    background-repeat:no-repeat; 
    background-attachment: fixed; 

background: rgb(242,245,246); /* Old browsers */ 
background: -moz-linear-gradient(top, rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,245,246,1)), color-stop(37%,rgba(227,234,237,1)), color-stop(100%,rgba(200,215,220,1))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* IE10+ */ 
background: linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0); /* IE6-9 */ 

}

источник

2015-02-23 joe

ответ

5

Похоже, у вас есть пропущенные некоторые ваши свойства CSS. Взгляните на этот раздел.

background-repeat:no-repeat; 
background-attachment: fixed; 
background: rgb(242,245,246); /* Old browsers */

Вы определили свойства давно рук background-repeat и background-attachment перед короткой стороны background собственности. Когда свойство background будет считано, оно сбросит все ранее заданные свойства фона.

Просто переместите их ниже других свойств фона, и он будет работать.

html 
 
{ 
 
    height:100%; 
 
    width:100%; 
 
} 
 

 
body 
 
{ 
 
    margin:0; 
 
    padding:0; 
 
    width:100%; 
 
    height:100%; 
 
    min-height:100%; 
 
    background: rgb(242,245,246); /* Old browsers */ 
 
    background: -moz-linear-gradient(top, rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%); /* FF3.6+ */ 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,245,246,1)), color-stop(37%,rgba(227,234,237,1)), color-stop(100%,rgba(200,215,220,1))); /* Chrome,Safari4+ */ 
 
    background: -webkit-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* Chrome10+,Safari5.1+ */ 
 
    background: -o-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* Opera 11.10+ */ 
 
    background: -ms-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* IE10+ */ 
 
    background: linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* W3C */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0); /* IE6-9 */ 
 
    background-repeat:no-repeat; 
 
    background-attachment: fixed; 
 
}
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1>

источник

2015-02-23 05:38:17

+1

Хорошо заметили. Это лучший ответ. – sideroxylon

+0

Хороший ответ @Alexander – Sachin

+0

Хороший ответ !. Кроме того, вы можете использовать ** background-image ** вместо * background *; то порядок не имеет значения. – vals

0

положить это в вызове раздельный body после фактического body:

body { 
    background-attachment: fixed 
    background-repeat:no-repeat; 
}

ваш CSS должен выглядеть так:

html 
{ 
    height:100%; 
    width:100%; 
} 

body 
{ 
    margin:0; 
    padding:0; 
    width:100%; 
    height:100%; 
    min-height:100%; 



background: rgb(242,245,246); /* Old browsers */ 
background: -moz-linear-gradient(top, rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,245,246,1)), color-stop(37%,rgba(227,234,237,1)), color-stop(100%,rgba(200,215,220,1))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* IE10+ */ 
background: linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0); /* IE6-9 */ 

} 

body { 
     background-attachment: fixed; 
     background-repeat:no-repeat; 
    }

по причине заказа

LIVE DEMO

источник

2015-02-23 05:37:58

+0

не нужно иметь отдельный блок селектора 'body'; вы можете поместить записи «background-attachment» и «background-repeat» после строки 'filter'. – Raptor

+0

Я знаю это, но это решение уже находится в предварительном просмотре, так что вот еще один :) и оба они хорошо работают, –

1

Вы можете удалить height:100% из html:

html 
 
{ 
 
    
 
    width:100%; 
 
} 
 

 
body 
 
{ 
 
    margin:0; 
 
    padding:0; 
 
    width:100%; 
 
    height:100%; 
 
    min-height:100%; 
 
    background-repeat:no-repeat; 
 
    background-attachment: fixed; 
 

 
background: rgb(242,245,246); /* Old browsers */ 
 
background: -moz-linear-gradient(top, rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%); /* FF3.6+ */ 
 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,245,246,1)), color-stop(37%,rgba(227,234,237,1)), color-stop(100%,rgba(200,215,220,1))); /* Chrome,Safari4+ */ 
 
background: -webkit-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* Chrome10+,Safari5.1+ */ 
 
background: -o-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* Opera 11.10+ */ 
 
background: -ms-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* IE10+ */ 
 
background: linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* W3C */ 
 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0); /* IE6-9 */ 
 

 
}
<div> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    </div>

источник

2015-02-23 05:38:51 sideroxylon

0

Вы также можете попробовать этот способ, добавьте пустой DIV и прикрепить этот CSS к нему (http://jsbin.com/jugiyutibu/1/edit)

.bg 
{ 
    width:100%; 
    height:100%; 
    position:fixed; 
    z-index:-1; 
background: rgb(242,245,246); /* Old browsers */ 
background: -moz-linear-gradient(top, rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,245,246,1)), color-stop(37%,rgba(227,234,237,1)), color-stop(100%,rgba(200,215,220,1))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* IE10+ */ 
background: linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0); /* IE6-9 */ 

}

источник

2015-02-23 05:41:23 PRAH

Смежные вопросы

 Смежные вопросы