HTML에서 배경색 조정

콘텐츠

단계로
4 가지 방법 중 1 : 단색 배경색 설정
4 가지 방법 중 2 : 사진을 배경으로 사용
4 가지 방법 중 3 : 그라데이션 배경 만들기
4 가지 방법 중 4 : 컬러 애니메이션을 배경 화면으로 설정

HTML에서 웹 페이지의 배경을 설정하려면, 다음의 "body"요소를 약간 변경하면됩니다. 스타일> / 스타일> 태그. 단계는 배경 화면의 모양에 따라 다릅니다. 웹 사이트의 배경을 단색, 이미지, 그라디언트 또는 색상 애니메이션으로 설정하는 방법을 알아 봅니다.

단계로

4 가지 방법 중 1 : 단색 배경색 설정

선호하는 텍스트 편집기에서 HTML 파일을 엽니 다. HTML5부터 HTML 속성 bgcolor>는 더 이상 지원되지 않습니다. 페이지의 다른 모든 스타일 측면과 마찬가지로 배경색도 CSS로 설정해야합니다.
추가 스타일> / 스타일> 문서에 태그를 지정합니다. 페이지의 모든 스타일 데이터 (배경색 포함)는 이러한 태그 내에 인코딩되어야합니다. 당신은 가지고 있습니까 스타일> 태그가 이미 표시된 경우 파일의 해당 부분으로 스크롤 할 수 있습니다.
! DOCTYPE html> html> head> style> / style> / head> / html>
내부에 "body"요소를 입력하십시오. 스타일> / 스타일> 태그. CSS에서 "body"요소를 변경하면 전체 페이지에 영향을 미칩니다.
! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>
"body"요소에 "background-color"속성을 추가합니다. 이 문맥에서 "color"의 철자 하나만 작동합니다 (색상 아님).
! DOCTYPE html> html> head> style> body {background-color :} / style> / head> body> / body> / html>
"배경색"뒤에 원하는 배경색을 배치합니다. 이제 색상 이름 (초록, 푸른, 에드등), 16 진수 (16 진수) 코드 (예 : #000000 검은 색, # ff0000 빨간색 등의 경우) 또는 색상에 대한 RGB 값 (예 : rgb (255,255,0) 노란색). 다음은 배경을 wikiHow 배너와 동일하게 만드는 16 진수 코드의 예입니다.
DOCTYPE html> html> head> style> body {background-color : # 93B874; } / 스타일> / 머리> 본문> / 본문> / html>
- 하얀: #FFFFFF
- 라이트 핑크 : # FFCCE6
- 번트 시에나 : #993300
- 인디고- # 4B0082
- 바이올렛- # EE82EE
- w3schools.com HTML 색상 선택기를 확인하여 원하는 색상의 16 진 코드를 찾으십시오.
다른 요소에 배경색을 적용하려면 "background-color"를 사용하십시오. body 요소를 설정 한 것처럼 background-color를 사용하여 다른 요소의 배경을 설정할 수 있습니다. 해당 요소를 스타일> / 스타일> background-color 속성으로.
DOCTYPE html> html> head> style> body {background-color : # 93B874; } h1 {배경색 : 주황색; } p {배경색 : rgb (255,0,0); } / style> / head> body> h1>이 헤더는 주황색 배경을 얻습니다. / h1> p>이 단락은 빨간색 배경을 얻습니다. / p> / body> / html>

4 가지 방법 중 2 : 사진을 배경으로 사용

텍스트 편집기에서 HTML 파일을 엽니 다. 많은 사람들이 이미지를 웹 사이트의 배경으로 사용하는 것을 선호합니다. 이를 통해 패턴, 질감, 사진 또는 기타 이미지를 배경으로 설정할 수 있습니다. HTML5에서 모든 배경은 CSS (Cascading Style Sheets)로 설정해야합니다. 스타일> / 스타일> 태그.
추가 스타일> / 스타일> HTML 파일에 태그를 추가합니다. 페이지의 모든 스타일 데이터 (배경색 포함)는이 태그 내에 표시되어야합니다. 당신은 이미 스타일> 태그가 설정되면 파일의 해당 부분으로 스크롤합니다.
! DOCTYPE html> html> head> style> / style> / head> / html>
내부에 "body"요소를 입력하십시오. 스타일> / 스타일> 태그. CSS에서 "body"요소를 변경하면 전체 페이지에 영향을 미칩니다.
! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>
"body"요소에 "background-image"속성을 추가합니다. 이 속성을 추가 할 때 이미지의 파일 이름이 필요합니다. 이미지가 html 파일과 동일한 폴더에 저장되어 있는지 확인하십시오 (또는 웹 서버에 파일의 전체 경로를 추가하십시오).
! DOCTYPE html> html> head> style> body {background-image : url ( "imagename.png"); 배경색 : # 93B874; } / 스타일> / 머리> 본문> / 본문> / html>
- 코드를 포함하는 것이 좋습니다. 배경색 배경 이미지가로드되지 않는 경우에만.
여러 이미지를 레이어링합니다. 여러 이미지를 서로 쌓을 수 있습니다. 겹쳐졌을 때 서로를 보완하는 투명한 배경이있는 이미지가있는 경우 유용 할 수 있습니다.
! DOCTYPE html> html> head> style> body {background-image : url ( "image1.png"), url ( "image2.gif"); 배경색 : # 93B874; } / 스타일> / 머리> 본문> / 본문> / html>
- 첫 번째 이미지가 맨 위에 있습니다. 두 번째 이미지는 첫 번째 이미지 아래에 있습니다.

4 가지 방법 중 3 : 그라데이션 배경 만들기

CSS를 사용하여 그라데이션 배경을 만듭니다. 단색보다 좀 더 스타일리시 한 것을 찾고 있지만 컬러 애니메이션만큼 바쁘지는 않다면 그라데이션 배경을 사용해보세요. 그라디언트는 다른 동등성으로 변경되는 색상입니다. CSS를 사용하여 그라디언트를 만들고 조정할 수 있습니다. 색 그라데이션 만들기를 시작하기 전에 CSS로 웹 페이지 서식을 지정하는 기본 사항에 대한 충분한 지식을 얻어야합니다.
표준 구문을 이해하십시오. 그래디언트를 만들 때 필요한 정보에는 시작점과 시작 각도, 전환이 발생하는 색상의 두 가지가 있습니다. 모두 겹치는 여러 색상을 선택할 수 있으며 그라디언트의 방향이나 각도를 지정할 수 있습니다.
배경 : 선형 그라데이션 (방향 / 각도, 색상 1, 색상 2, 색상 3 등);
수직 그라디언트를 만듭니다. 방향을 지정하지 않으면 색상이 위에서 아래로 표시됩니다. 브라우저마다 그라디언트 함수의 버전이 다르기 때문에 다른 버전의 코드를 추가해야합니다.
! DOCTYPE html> html> head> style> html {min-height : 100 %; / * 그래디언트가 전체 페이지에 걸쳐 있는지 확인하는 데 필요합니다. * /} body {background : -webkit-linear-gradient (# 93B874, # C9DCB9); / * Chrome 10+, Safari 5.1+ * / 배경 : -o-linear-gradient (# 93B874, # C9DCB9); / * Opera 11.1+ * / 배경 : -moz-linear-gradient (# 93B874, # C9DCB9); / * Firefox 3.6+ * / 배경 : 선형 그라데이션 (# 93B874, # C9DCB9); / * 기본 구문 (마지막이어야 함) * / background-color : # 93B874; / * 그래디언트가로드되지 않을 경우 배경색을 설정하는 것이 좋습니다. * /} / 스타일> / 헤드> 바디> / 바디> / html>
방향으로 그라디언트를 만듭니다. 그라디언트에 방향을 추가하면 색상 이동 방식을 조정할 수 있습니다. 다른 브라우저는 방향을 다르게 해석합니다. 그들은 모두 동일한 색상 그라디언트를 표시합니다.
! DOCTYPE html> html> head> style> html {min-height : 100 %; } body {background : -webkit-linear-gradient (왼쪽, # 93B874, # C9DCB9); / * 왼쪽에서 오른쪽으로 * / 배경 : -o- 선형 그라데이션 (오른쪽, # 93B874, # C9DCB9); / * 오른쪽 끝 * / 배경 : -moz-linear-gradient (오른쪽, # 93B874, # C9DCB9); / * 오른쪽 끝 * / 배경 : 선형 그라데이션 (오른쪽으로 # 93B874, # C9DCB9); / * 오른쪽으로 이동 * / 배경색 : # 93B874; / * 그래디언트가로드되지 않을 경우 배경색을 설정하는 것이 좋습니다. * /} / 스타일> / 헤드> 바디> / 바디> / html>
다른 속성을 사용하여 그라데이션을 조정합니다. 그래디언트로 더 많은 일을 할 수 있습니다.
- 예를 들어, 두 가지 이상의 색상을 사용할 수있을뿐만 아니라 각 색상 뒤에 백분율을 배치 할 수도 있습니다. 이를 통해 각 색상 세그먼트가 확보 할 공간의 양을 나타낼 수 있습니다.
  배경 : 선형 그라데이션 (# 93B874 10 %, # C9DCB9 70 %, # 000000 90 %);
- 색상에 투명도를 추가하십시오. 이것으로 색상을 희미하게 할 수 있습니다. 동일한 색상을 사용하여 색상에서 아무 것도 사라지게합니다. 당신은 기능을 좋아할 것입니다 rgba () 색상을 나타내는 데 사용해야합니다. 끝 값은 투명도를 결정합니다. 0 불투명 및 1 투명합니다.
  배경 : 선형 그래디언트 (오른쪽으로, rgba (147,184,116.0), rgba (147,184,116.1));

4 가지 방법 중 4 : 컬러 애니메이션을 배경 화면으로 설정

로 이동 스타일> HTML 코드에서. 단색 배경색을 찾지 못한 경우 색상 배경을 변경해보십시오. HTML 5에서 배경색은 CSS (Cascading Style Sheets)로 정의되어야합니다. CSS로 배경색을 설정 한 적이 없다면이 방법을 시도하기 전에 단색 배경색 설정 섹션을 읽어보십시오.
속성 추가 생기 "본문"요소에. 브라우저마다 다른 코드가 필요하므로 2 개의 다른 속성을 추가해야합니다.
DOCTYPE html> html> head> style> body {-webkit-animation : colorchange 60s infinite; 애니메이션 : colorchange 60s 무한; } / 스타일> / 머리> 본문> / 본문> / html>
- -webkit-animation 이 속성은 Chrome 기반 브라우저 (Chrome, Opera, Safari)에 필요합니다. 생기 다른 모든 브라우저의 표준입니다.
- 색상 변경 이 예에서는 애니메이션이라고합니다.
- 60 년대 애니메이션 / 전환의 기간 (60 초)입니다. 웹킷과 기본 구문 모두에 대해이를 설정해야합니다.
- 무한 애니메이션이 무기한 반복되어야 함을 나타냅니다. 색상을 반복 한 다음 마지막 색상에서 중지하려면이 부분을 생략 할 수 있습니다.
애니메이션에 색상을 추가합니다. 이제 @keyframes 규칙을 사용하여 통과 할 배경색과 각 색상이 페이지에 표시되는 기간을 설정합니다. 다시 말하지만, 다양한 브라우저에 대해 여러 인코딩을 추가해야합니다.
DOCTYPE html> html> head> style> body {-webkit-animation : colorchange 60s infinite; 애니메이션 : colorchange 60s 무한; } @ -webkit-keyframes colorchange {0 % {background : # 33FFF3;} 25 % {background : # 78281F;} 50 % {background : # 117A65;} 75 % {background : # DC7633;} 100 % {background : # 9B59B6;}} @keyframes colorchange {0 % {배경 : # 33FFF3;} 25 % {배경 : # 78281F;} 50 % {배경 : # 117A65;} 75 % {배경 : # DC7633;} 100 % {배경 : # 9B59B6;}} / 스타일> / 머리> 본문> / 본문> / html>
- 두 줄 (@ -webkit-keyframes 과 @keyframes 배경색과 백분율에 대해 동일한 값을 갖습니다. 모든 브라우저에서 경험이 동일하게 유지되도록 균일하게 유지되어야합니다.
- 백분율 (0%, 25%등)은 애니메이션의 총 길이 (60 년대). 페이지가로드되면 배경 색상이 0% 및 (# 33FFF3). 애니메이션의 25 % 또는 60 초가 재생되면 배경이 # 78281F, 등등.
- 원하는대로 지속 시간과 색상을 조정할 수 있습니다.