[css] 본문에 설정된 CSS3 그라디언트 배경이 늘어나지 않고 대신 반복됩니까?

좋아, <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 ).

답변

설정, 이전의 대답에 대해서는 html및 body하려면 height: 100%컨텐츠가 필요한 경우 스크롤로 작동하지 않습니다. fixed배경에 추가하면 문제가 해결됩니다.need for height: 100%;

예 :

body {
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)) fixed;
}

스 니펫 확장

답변

나는 파티에 늦었다는 것을 알고 있지만 여기에 더 확실한 대답이 있습니다.

당신이해야 할 모든 사용하는 것입니다 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이며 한동안 사용되었습니다. 🙂

답변

이 페이지에는 많은 부분 정보가 있지만 완전한 정보는 아닙니다. 여기 내가하는 일이 있습니다.

여기에 그라디언트를 만드십시오 : http://www.colorzilla.com/gradient-editor/
BODY 대신 HTML에서 그라디언트를 설정하십시오.
“background-attachment : fixed;”로 HTML의 배경을 수정하십시오.
BODY의 상단 및 하단 여백을 끕니다.
(선택 사항) 일반적으로 <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 태그에 그 또는 최소한 기본 그라데이션 색상 인 끝 그라디언트 색상도 설정합니다.