좋아, <body>총 내용은 총 300px입니다.
<body>사용 배경을 설정 -webkit-gradient하거나-moz-linear-gradient
그런 다음 창을 최대화하거나 (또는 300px보다 크게) 그라디언트는 정확히 300px (콘텐츠 높이)이며 나머지 창을 채우기 위해 반복합니다.
나는 이것이 웹킷과 도마뱀에서 동일하기 때문에 버그가 아니라고 가정합니다.
그러나 그라디언트를 반복하는 대신 창을 채우기 위해 늘릴 수있는 방법이 있습니까?
답변:
다음 CSS를 적용하십시오.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}편집 :margin: 0; 의견 당 본문 선언에 추가되었습니다 ( Martin ).
편집 :background-attachment: fixed; 주석 당 본문 선언에 추가되었습니다 ( Johe Green ).
background-repeat와 background-attachment온 후 당신의 background규칙. 그렇지 않으면 배경이 계속 반복 될 수 있습니다.
설정, 이전의 대답에 대해서는 html및 body하려면 height: 100%컨텐츠가 필요한 경우 스크롤로 작동하지 않습니다. fixed배경에 추가하면 문제가 해결됩니다.need for height: 100%;
예 :
body {
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)) fixed;
}background-attachment: fixed
min-height:100%(호환되는 브라우저에서)
나는 파티에 늦었다는 것을 알고 있지만 여기에 더 확실한 대답이 있습니다.
당신이해야 할 모든 사용하는 것입니다 min-height: 100%;보다는 height: 100%;당신의 그라데이션 배경 내용이 스크롤 경우에도 반복하지 않고 뷰포트의 전체 높이를 확장하는 것입니다.
이처럼 :
html {
min-height: 100%;
}
body {
background: linear-gradient(#ff7241, #ff4a1f);
}이 문제를 해결하기 위해 수행 한 작업은 다음과 같습니다. 내용의 전체 길이에 대한 그라디언트를 표시 한 다음 배경색 (일반적으로 그라디언트의 마지막 색상)으로 대체합니다.
html {
background: #cbccc8;
}
body {
background-repeat: no-repeat;
background: #cbccc8;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8));
background: -moz-linear-gradient(top, #fff, #cbccc8);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cbccc8');
}<body>
<h1>Hello world!</h1>
</body>FireFox 3.6, Safari 4 및 Chrome에서 이것을 테스트했으며 어떤 이유로 든 HTML 태그 스타일을 지원하지 않는 모든 브라우저의 본문에 배경색을 유지합니다.
설정 html { height: 100%}은 IE에 혼란을 줄 수 있습니다. 다음은 예제입니다 (png). 그러나 무엇이 잘 작동하는지 알고 있습니까? <html>태그에 배경을 설정하기 만하면됩니다 .
html {
-moz-linear-gradient(top, #fff, #000);
/* etc. */
}배경이 아래쪽으로 확장되고 이상한 스크롤 동작이 발생하지 않습니다. 다른 모든 수정 사항은 건너 뛸 수 있습니다. 그리고 이것은 광범위하게 지원됩니다. html 태그에 배경을 적용 할 수없는 브라우저를 찾지 못했습니다. 완벽하게 유효한 CSS이며 한동안 사용되었습니다. :)
html있지만 제 경우에는 페이지 아래쪽으로 중지됩니다. 추가 background-attachment:fixed하면 문제가 해결됩니다. 여러 사이트에서이 문제가 발생했지만 원인을 찾지 못했습니다.
html, body { height: 100%; }.
이 페이지에는 많은 부분 정보가 있지만 완전한 정보는 아닙니다. 여기 내가하는 일이 있습니다.
<DIV id='container'>모든 콘텐츠를예를 들면 다음과 같습니다.
html {
background: #a9e4f7; /* Old browsers */
background: -moz-linear-gradient(-45deg, #a9e4f7 0%, #0fb4e7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #a9e4f7 0%,#0fb4e7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #a9e4f7 0%,#0fb4e7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #a9e4f7 0%,#0fb4e7 100%); /* IE10+ */
background: linear-gradient(135deg, #a9e4f7 0%,#0fb4e7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
background-attachment: fixed;
}
body {
margin-top: 0px;
margin-bottom: 0px;
}
/* OPTIONAL: div to store content. Many of these attributes should be changed to suit your needs */
#container
{
width: 800px;
margin: auto;
background-color: white;
border: 1px solid gray;
border-top: none;
border-bottom: none;
box-shadow: 3px 0px 20px #333;
padding: 10px;
}이것은 다양한 크기와 스크롤이 필요한 페이지에서 IE, Chrome 및 Firefox로 테스트되었습니다.
더러운; 아마도 당신은 최소 높이를 추가 할 수 있습니다 : 100 %; HTML과 body 태그에 그 또는 최소한 기본 그라데이션 색상 인 끝 그라디언트 색상도 설정합니다.
여기에 대한 답변을 얻는 데 문제가있었습니다.
본문에 전체 크기 div를 수정하고 음수 z- 인덱스를 제공하고 그라디언트를 첨부하는 것이 더 효과적이라는 것을 알았습니다.
<style>
.fixed-background {
position:fixed;
margin-left: auto;
margin-right: auto;
top: 0;
width: 100%;
height: 100%;
z-index: -1000;
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
}
.blue-gradient-bg {
background: #134659; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(top, #134659 , #2b7692); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom, #134659, #2b7692); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(top, #134659, #2b7692); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom, #134659 , #2b7692); /* Standard syntax */
}
body{
margin: 0;
}
</style>
<body >
<div class="fixed-background blue-gradient-bg"></div>
</body>다음은 전체 샘플입니다 https://gist.github.com/morefromalan/8a4f6db5ce43b5240a6ddab611afdc55
나는이 CSS 코드를 사용했고 그것은 나를 위해 일했다 :
html {
height: 100%;
}
body {
background: #f6cb4a; /* Old browsers */
background: -moz-linear-gradient(top, #f2b600 0%, #f6cb4a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2b600), color-stop(100%,#f6cb4a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* IE10+ */
background: linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2b600', endColorstr='#f6cb4a',GradientType=0 ); /* IE6-9 */
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
width: 100%;
background-position: 0px 0px;
}관련 정보는 http://www.colorzilla.com/gradient-editor/ 에서 자신 만의 멋진 그라디언트를 만들 수 있다는 것입니다 .
/ 스텐
background: #13486d; /* for non-css3 browsers */
background-image: -webkit-gradient(linear, left top, left bottom, from(#9dc3c3), to(#13486d)); background: -moz-linear-gradient(top, #9dc3c3, #13486d);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc3c3', endColorstr='#13486d');
background-repeat:no-repeat;이것이 내가 한 일입니다.
html, body {
height:100%;
background: #014298 ;
}
body {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c9cf2), color-stop(100%,#014298));
background: -moz-linear-gradient(top, rgba(92,156,242,1) 0%, rgba(1,66,152,1) 100%);
background: -o-linear-gradient(top, #5c9cf2 0%,#014298 100%);
/*I added these codes*/
margin:0;
float:left;
position:relative;
width:100%;
}몸을 띄우기 전에 상단에 틈이 있었고 html의 배경색을 보여주었습니다. html의 bgcolor를 제거하면 아래로 스크롤하면 그라디언트가 잘립니다. 그래서 몸을 띄우고 위치를 상대적으로, 너비를 100 %로 설정했습니다. 그것은 사파리, 크롬, 파이어 폭스, 오페라, 인터넷 expl ..에서 일했다. 아 잠깐만. :피
너희들은 어떻게 생각하니?
margin:0;해야body하거나 페이지 하단에 간격이 있음을 알았습니다.