"CSS 그라데이션 body에 적용하기"의 두 판 사이의 차이

2017년 9월 10일 (일) 15:13 기준 최신판

1 개요[ | ]

HTML body 그라데이션 적용
CSS 그라이데이션 body에 적용하기

HTML5 등에서 body에 그라데이션 적용했을 때, 그라데이션이 전체에 적용되지 않을 수 있다. 이 때는 다음 스타일을 함께 적용하자.

html { height: 100%; }
body { height: 100%; margin: 0; }

<style>
html { height: 100%; }
body {
  height: 100%; margin: 0;
  background: -webkit-linear-gradient(red, yellow);
  background: -moz-linear-gradient(red, yellow);
  background: -o-linear-gradient(red, yellow);
  background: linear-gradient(red, yellow);
}
</style>
<body>
Hello, World!
</body>

2 같이 보기[ | ]

@@ 1번째 줄: / 1번째 줄: @@
 ==개요==
+;HTML body 그라데이션 적용
 ;CSS 그라이데이션 body에 적용하기
 HTML5 등에서 body에 그라데이션 적용했을 때, 그라데이션이 전체에 적용되지 않을 수 있다.
@@ 12번째 줄: / 13번째 줄: @@
 body {
    height: 100%; margin: 0;
-   background: -webkit-linear-gradient(red 0%, blue 100%);
+   background: -webkit-linear-gradient(red, yellow);
-   background: -moz-linear-gradient(red 0%, blue 100%);
+   background: -moz-linear-gradient(red, yellow);
-   background: -o-linear-gradient(red 0%, blue 100%);
+   background: -o-linear-gradient(red, yellow);
-   background: linear-gradient(red 0%, blue 100%);
+   background: linear-gradient(red, yellow);
 }
 </style>
@@ 23번째 줄: / 24번째 줄: @@
 </source>
 <jsfiddle height='300'>8Lwm2vyj</jsfiddle>
+----
 ==같이 보기==
-* [[CSS 그라이데이션]]
+* [[CSS 그라데이션]]
 * [[HTML body 태그]]
 [[분류: CSS]]