programing

바디에 설정된 CSS3 그레이디언트 배경은 늘어나지 않고 반복됩니까?

css3 2023. 7. 29. 08:46

바디에 설정된 CSS3 그레이디언트 배경은 늘어나지 않고 반복됩니까?

, 아요좋, 안에있내말용 에 있는 .<body>총 300m 높이입니다.

의 하면,<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).

이전답관설정여하련과변설정▁setting▁regarding,여하관▁answer를 설정합니다.html그리고.bodyheight: 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(#b5e48c, #457b9d);
}

하지만 두 번째 해결책이 있습니다.

다른 사람들이 말했듯이, 가치를 추가하는 것.fixed에▁background선언, 그라데이션이 뷰포트의 전체 높이를 확장합니다.

다음과 같이:

body {
    background: linear-gradient(#b5e48c, #457b9d) fixed;
}

에도 예, 여히선합니다를 선언해야 .min-height: 100%;에 시대에html.

다음은 CodePen에서 두 가지 솔루션을 모두 사용할 수 있는 데모입니다. https://codepen.io/ricardozea/pen/abwGBmz?editors=1100

제가 이 문제를 해결하기 위해 한 일은 다음과 같습니다.내용의 전체 길이에 대한 그라데이션을 표시한 다음 배경색으로 돌아갑니다(그라데이션의 마지막 색상을 표시함).

   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이고 꽤 오래되었습니다.:)

이 페이지에는 많은 부분적인 정보가 있지만, 완전한 정보는 아닙니다.제가 하는 일은 다음과 같습니다.

  1. 여기에 그라데이션을 만듭니다. http://www.colorzilla.com/gradient-editor/
  2. BODY 대신 HTML에 그라데이션을 설정합니다.
  3. "background-attachment: fixed;"를 사용하여 HTML의 배경을 수정합니다.
  4. BODY의 위쪽 및 아래쪽 여백 끄기
  5. (선택사항) 일반적으로 다음을 만듭니다.<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를 사용하여 다양한 크기와 스크롤 요구사항의 페이지에서 테스트되었습니다.

끝에 고정된 단어와 공백을 추가하면 충분합니다.높이를 설정할 필요가 없습니다.

body{
    background: linear-gradient(#e4efe9,#93a5cf) fixed;
}

더티; 혹시 html에 최소 높이: 100%; 그리고 본문 태그를 추가할 수 있습니까?또는 최소한 끝 그라데이션 색상인 기본 배경색을 설정합니다.

제가 여기서 해답을 얻는 데 어려움을 겪었습니다.
몸에 풀사이즈 디브를 고정하고 음의 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의 bg색을 제거하면 아래로 스크롤하면 그라데이션이 잘려나가기 때문에 바디를 띄우고 바디의 위치를 상대적으로 설정하고 폭을 100%로 설정했습니다.사파리, 크롬, 파이어폭스, 오페라, 인터넷익스플로..오 잠깐만. :P

당신들은 어떻게 생각합니까?

100% 대신에 나는 지금 이것을 얻었고 공백 없이 전체 페이지에 대해 작동합니다.

html {     
height: 1420px; } 
body {     
height: 1400px;     
margin: 0;     
background-repeat: no-repeat; }

언급URL : https://stackoverflow.com/questions/2869212/css3-gradient-background-set-on-body-doesnt-stretch-but-instead-repeats

'programing' 카테고리의 다른 글

ASP.net EF Codefirst Data Annotations를 사용하여 SQL Server에서 열을 varchar(max)로 설정하려면 어떻게 해야 합니까?  (0) 2023.07.29
Spring Data Rest - 내포된 특성별 정렬  (0) 2023.07.29
프로젝트에 동일한 이름의 모듈이 있는 경우 표준 라이브러리에서 가져오려면 어떻게 해야 합니까?(Python이 모듈을 찾는 위치를 어떻게 제어할 수 있습니까?)  (0) 2023.07.29
스프링 데이터 jpa를 사용하여 단일 필드 업데이트  (0) 2023.07.29
외부에서 계산된 변수를 사용한 콜백 함수  (0) 2023.07.24

'programing'의 다른글

  • 현재글바디에 설정된 CSS3 그레이디언트 배경은 늘어나지 않고 반복됩니까?

관련글

댓글

티스토리툴바