CSS ??
CSS Background
CSS ?? ??? HTML ??? ??? ???? ? ?????.
CSS ??? ?? ??? ?????.
Background-color
Background-image
Background-repeat
Background-attachment
ground -position
???
??? ??? ??? ???? ?????.
???? ???? ?? ???? ?????.
?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(php.cn)</title>
<style>
body
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>我的 CSS web 頁!</h1>
<p>你好！這是來自php中文網的實例。</p>
</body>
</html>????? ??? ???. it
CSS , ?? ?? ????? ??? ?? ???? ?????.
Hex - ?: "#ff0000"
RGB - ?: "rgb(255,0,0)"
?? ?? - ?: "red"
?? ??? h1, p ? div ??? ?? ?? ???? ????.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(php.cn)</title>
<style>
h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>CSS background-color 實例!</h1>
<div>
改文本插入在 div 元素中。
<p>該段落有自己的背景顏色。</p>
我們仍然在同一個 div 中。
</div>
</body>
</html>Background image
?? ??? ??
????? ?? ???? ?? ?? ???? ??? ????? ???? ?????.
??? ?? ??? ?? ?:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(php.cn)</title>
<style>
body
{
background-image:url('/upload/course/000/000/006/580837363b987802.jpg');
background-color:#cccccc;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>?? ??? - ?? ?? ?? ???
????? background-image ??? ???? ?? ?? ?? ??????.
?? ???? ??? ?? ?? ? ??? ???? ?? ?? ???? ?? ????.
?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(php.cn)</title>
<style>
body
{
background-image:url('/upload/course/000/000/006/58083b0ef203a172.jpg');
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>???? ???? ???? ??(??-x) ??? ??? ? ?????.
??
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(php.cn)</title>
<style>
body
{
background-image:url('/upload/course/000/000/006/58083a548d12a750.jpg');
background-repeat:repeat-x;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>? ????? ???? ??? ???
?? ??? - ?? ?? ?? ???? ??
?? ???? ??? ????? ??? ?? ??? ???.
??? ???? ??? ??? background-repeat ??? ??? ? ????. :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(php.cn)</title>
<style>
body
{
background-image:url('/upload/course/000/000/006/58083c0089e20545.jpg');
background-repeat:no-repeat;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>終于為那一身江南煙雨覆了天下，容華謝后，不過一場，山河永寂。</p>
<p>千秋功名，一世葬你，玲瓏社稷，可笑卻無君王命</p>
</body>
</html>????? ???? ??? ???
?? ???? ??? ????? ?? ????? ??? ??? ??? ??? ?? ??? ?? ???? ???? ??? ??? ?????. ???? ??? ???????.
?? ?? ??? ???? ???? ???? ??? ????? ? ????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(php.cn)</title>
<style>
body
{
background-image:url('/upload/course/000/000/006/58083c0089e20545.jpg');
background-repeat:no-repeat;
background-position:right top;
margin-right:200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>背景圖片不重復，設置 position 實例。</p>
<p>背景圖片只顯示一次，并與文本分開。</p>
<p>實例中還添加了 margin-right 屬性用于讓文本與圖片間隔開。</p>
</body>
</html>????? ???? ??? ???
Background - ?? ??
?? ??? ? ? ???? ???? ???? ?????. ??? ??? ????.
??? ??? ??? ?????? ??? ??? ??? ??? ??? ? ????.
???? ?? ??? "??"???.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(php.cn)</title>
<style>
body
{
background:#ffffff url('/upload/course/000/000/006/58083c0089e20545.jpg') no-repeat right top;
margin-right:200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>終于為那一身江南煙雨覆了天下，容華謝后，不過一場，山河永寂。</p>
<p>千秋功名，一世葬你，玲瓏社稷，可笑卻無君王命</p>
</body>
</body>
</html>????? ???? ??? ???
?? ??? ??? ? , ?? ? ??? ??? ????.
??-??
??-???
??-??
??-??
?? ??
?? ??? ?? ?? ??? ?? ??? ??? ????.
CSS ?? ??
| Background | |
|---|---|
| background-attachment | |
| background-color | |
| background-image | |
| ?? ?? | |
| background-repeat | |
