이 글에서는 HTML 코드와 CSS 스타일 코드를 사용하여 HTML의 배경색을 설정하는 방법을 보여줍니다. 배경 이미지를 설정하는 방법도 소개되어 있습니다. 모두에게 도움이 되기를 바랍니다. 지금 이 글을 살펴보겠습니다
먼저 HTML에서 배경색을 설정하는 방법을 살펴보겠습니다.
먼저 배경색을 설정하고, body 태그 효과를 살펴보겠습니다.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>PHP中文网</title> </head> <body bgcolor="black"> 这是PHP中文网 </body> </html>
배경색이 검정색으로 설정되어 있는데 브라우저에 표시되는 효과가 생각나시나요?
그렇습니다. 아무것도 보이지 않습니다. 글꼴을 색상으로 설정하고 표시할 수 있는지 확인해 보겠습니다.
<body bgcolor="black"> <p>这是<font color="#E41316">PHP中文网</font></p> </body>
이제 효과를 살펴보겠습니다.
예 글꼴에 색상을 추가하면 텍스트가 표시되지만 여전히 색상이 지정되지 않은 문자가 두 개 있으므로 표시할 수 없습니다.
이제 텍스트의 배경을 만드는 방법을 살펴보겠습니다.
<body bgcolor="black"> <p style="background-color: #E12125">这是PHP中文网</p> </body>
현재 글꼴 태그는 더 이상 작동하지 않으므로 과감하게 CSS 스타일을 사용하여 배경색을 변경합니다. CSS 스타일은 배경색만 설정합니다.
브라우저에 표시되는 효과를 살펴보겠습니다.
p 태그 때문에 배경이 행 전체를 차지합니다. 이렇게 하면 효과가 더 뚜렷해 보이기 때문에 프레임으로만 설명하지는 않겠습니다. 배경을 너무 많이 사용할 수 없을 때는 p 태그 주위에 div 태그를 추가하고 너비를 설정하면 됩니다. 텍스트의 너비를 지정하므로 텍스트 배경이 한 줄에 표시되지 않습니다. 이 방법도 일반적으로 사용되는 방법 중 하나입니다.
물론 사진을 배경 이미지로 사용할 수도 있습니다. 효과의 예를 살펴보겠습니다.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>PHP中文网</title> </head> <body style="background-image: url(https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg)"> <p>这是PHP中文网</p> </body> </html>
이것은 인터넷에서 복사한 사진입니다. 이제 효과가 매우 뚜렷합니다. 예를 보세요:
전체 웹페이지의 배경으로 사용됩니다. 배경 이미지로 사용하기에 적합한 다른 장소의 멋진 사진을 찾을 수 있습니다. 해당 사진을 마우스 오른쪽 버튼으로 클릭하고 이미지 주소 복사를 선택하여 이 URL에 추가할 수 있습니다. 이 방법도 매우 간단합니다. 아래에서 더 연습하여 효과가 나와 같은지 확인할 수 있습니다.
HTML에서 배경색 설정에 대한 이 글은 여기서 끝납니다. 더 자세히 알고 싶으시면 PHP 중국어 웹사이트의 HTML 학습 매뉴얼 칼럼을 방문하세요. 질문이 있으시면 아래에 메시지를 남겨주세요.
【에디터 추천】
HTML 단락 요소에 공백을 설정하는 방법은 무엇입니까? HTML 공간 설정 요약
html에서 큰 태그를 사용하는 방법은 무엇입니까? html 빅태그 사용예
위 내용은 HTML에서 배경색을 설정하는 방법은 무엇입니까? HTML 배경색 코드의 상세 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
