728x90
반응형
질문 : 본문에 설정된 CSS3 그라데이션 배경이 늘어나지 않고 대신 반복됩니까?
<body> 안의 콘텐츠가 총 300px 높이라고 말하세요.
-webkit-gradient 또는 -moz-linear-gradient 사용하여 <body> 의 배경을 설정하면
그런 다음 창을 최대화하거나 (또는 300px보다 크게 만듭니다) 그래디언트의 높이가 정확히 300px (콘텐츠 높이)가되고 나머지 창을 채우기 위해 반복합니다.
나는 이것이 webkit과 gecko에서 동일하기 때문에 이것이 버그가 아니라고 가정하고 있습니다.
그러나 반복하는 대신 창을 채우기 위해 그라디언트를 늘리는 방법이 있습니까?
답변
다음 CSS를 적용하십시오.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}편집 : 추가 margin: 0; 댓글 당 본문 선언 ( Martin ).
편집 : 배경 첨부 추가 background-attachment: fixed; 댓글 당 본문 선언 ( Johe Green ).
출처 : https://stackoverflow.com/questions/2869212/css3-gradient-background-set-on-body-doesnt-stretch-but-instead-repeats
728x90
반응형
'프로그래밍 언어 > HTML,CSS,JS' 카테고리의 다른 글
| HTMLCollection 요소에 대한 For 루프 (0) | 2021.08.11 |
|---|---|
| CSS를 사용하여 SVG 이미지의 색상을 변경하는 방법 (jQuery SVG 이미지 대체) (0) | 2021.08.11 |
| 두 개의 클래스가있는 요소에 적용되는 CSS 선택기 (0) | 2021.08.10 |
| 공백이 아닌 태그가 HTML5에서 유효한가요? (0) | 2021.08.10 |
| 문자열에서 HTML 태그 제거 (0) | 2021.08.10 |