CSS로 페이지 배경색을 설정하는 방법
- 醉折花枝作酒筹원래의
- 2021-04-20 09:51:295938검색
CSS에서는 "배경색" 속성을 사용하여 페이지 배경색을 설정할 수 있으며 구문은 "배경색: 색상 값"입니다. background-color 속성은 요소의 배경색을 설정합니다. 이는 패딩과 테두리(여백 제외)를 포함한 요소의 전체 크기입니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
페이지 배경색 설정
CSS는 body 태그의 background-color 속성을 설정하여 구현됩니다. 배경색은 주로 페이지의 테마를 강조하며 전경 텍스트 색상과 일치합니다. 구체적인 설정 방법은 텍스트 색상 값 설정과 동일하며, Hexadecimal, RGB 구성 요소 또는 색상의 영어 단어를 사용할 수 있습니다.
<span style="font-size:24px;"><html>
<head>
<title>
背景颜色
</title>
<style>
<!--
body{
background-color:#5b8a00;
margin:0px;
padding:0px;
color:#c4f762;
}
p{
font-size:15px;
padding-left:10px;
padding-top:8px;
line-height:120%;
}
span{
font-size:80px;
font-family:黑体;
float:left;
padding-right:5px;
padding-left:10px;
padding-top:8px;
}
-->
</style>
</head>
<body>
<img src="
http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg
"style="float:right;">
<span>春</span>
<p>季，地球的北半球开始倾向太阳，收到越来越多的太阳光直射，因而气温开始升高。随着冰雪消融，河流水位上涨。春季植物开始发芽生长，许多鲜花开放。冬眠的动物苏醒，许多以卵过冬的动物孵化，鸟类开始迁移，离开越冬地向繁衍地进发。许多动物在这段时间里发情，因此中国也将春季称为“万物复苏”的季节。春季气温和生物界的变化对人的心理和生理也有影响。</p>
<p>对农民来说，春季是播种许多农作物的季节。在春季，地球的北半球开始倾向太阳，收到越来越多的太阳光直射，因而气温开始升高。随着冰雪消融，河流水位上涨。春季植物开始发芽生长，许多鲜花开放。冬眠的动物苏醒，许多以卵过冬的动物孵化，鸟类开始迁移，离开越冬地向繁衍地进发。许多动物在这段时间里发情，因此中国也将春季称为“万物复苏”的季节。春季气温和生物界的变化对人的心理和生理也有影响。</p>
</body>
</html></span>코드는 위와 같습니다. 배경색은 짙은 녹색이고 텍스트 색상은 밝은 녹색입니다. 그림과 텍스트 내용 자체가 봄에 만물이 부활한다는 것을 보여줍니다.
배경색을 사용하여 페이지를 블록으로 나누세요
Background-color 속성은 페이지의 배경색을 설정할 수 있을 뿐만 아니라 거의 모든 HTML 요소의 배경색을 설정할 수 있습니다. 따라서 많은 웹페이지에서는 서로 다른 배경색을 설정하여 차단 효과를 얻습니다.
<span style="font-size:24px;"><html>
<head>
<title>
利用背景颜色分块
</title>
<style>
<!--
body{
padding:0px;
margin:0px;
background-color:#ffebe5;
}
.topbanner{
background-color:#fbc9ba;
}
.leftbanner{
width:22%;height:330px;
vertical-align:top;
background-color:#6d1700;
color:#FFFFFF;
text-align:left;
padding-left:40px;
font-size:14px;
}
.mainpart{
text-align:center;
}
-->
</style>
</head>
<body>
<table cellpadding="0"cellspacing="1" width="100%" border="0">
<tr>
<td colspan="2"class="topbanner"><img src="
http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg
"border="0"></td>
</tr>
<tr>
<td class="leftbanner">
<br><br>首页<br><br>分类讨论
<br><br>谈天说地<br><br>精华区
<br><br>我的信箱<br><br>休闲娱乐
<br><br>立即注册<br><br>离开本站
</td>
<td class="mainpart">正文内容……</td>
</tr>
</body>
</html></span>코드는 위와 같습니다. 상단 배너, 왼쪽 탐색바, 가운데 텍스트 부분은 각각 3가지 배경색을 사용하여 페이지 분할 목적을 달성합니다. 이 분할 방법은 웹 페이지 제작에서 자주 사용됩니다.
여기서 상단의 배너 사진은 왼쪽에서 오른쪽으로 색상 그라데이션이 있는 사진일 수 있으며, 색상이 사진 자체에서 페이지 배경 색상으로 전환되어 매우 자연스럽게 나타납니다. Photoshop에서도 웹페이지 제작에 흔히 사용되는 방식입니다.
추천 학습: css 비디오 튜토리얼
위 내용은 CSS로 페이지 배경색을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!