CSS 背景例項
CSS 例項
CSS 背景例項- CSS 文字例項
- CSS 字型(font)例項
- CSS 邊框(border)例項
- CSS 外邊距 (margin) 例項
- CSS 內邊距 (padding) 例項
- CSS 列表例項
- CSS 表格例項
- 輪廓（Outline） 例項
- CSS 尺寸 (Dimension) 例項
- CSS 分類 (Classification) 例項
- CSS 定位 (Positioning) 例項
- CSS 偽類 (Pseudo-classes)例項
- CSS 偽元素 (Pseudo-elements)例項
01-設定背景顏色
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>01設定背景顏色</title>
<style type="text/css">
body {background-color: #009e8e;}
h1 {background-color: #ccf600;}
h2 {background-color: transparent;}
p {background-color: #ffae00;}
p.no2 {background-color: #afd400; padding: 20px;}
</style>
</head>
<body>
<h1>我是標題1</h1>
<h2>我是標題2</h2>
<p>我是段落</p>
<p class="no2">我設定了內邊距。</p>
</body>
</html>
02設定文字的背景顏色
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>02設定文字的背景顏色</title>
<style type="text/css">
body {
background-color: #DDF0ED;
}
span.highlight {
background-color: #C7FFEC;
}
</style>
</head>
<body>
<p>
<span class="highlight">你說你想在海邊買一所房子。</span>你說你想在海邊買一所房子。 你說你想在海邊買一所房子。你說你想在海邊買一所房子。 你說你想在海邊買一所房子。你說你想在海邊買一所房子。 你說你想在海邊買一所房子。你說你想在海邊買一所房子。 你說你想在海邊買一所房子。
<span class="highlight">你說你想在海邊買一所房子。</span>
</p>
</body>
</html>
03將影象設定為背景
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>03將影象設定為背景</title>
<style>
body {
background-image: url(http://images2015.cnblogs.com/blog/846157/201511/846157-20151129175534453-599329583.jpg);
background-repeat: no-repeat;
}
p {
background-color: #E8DEAB;
}
</style>
</head>
<body>
<p>將影象設定為背景</p>
</body>
</html>
04如何重複背景影象
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>04如何重複背景影象</title>
<style>
body {
background-image: url(http://images2015.cnblogs.com/blog/846157/201511/846157-20151129183826047-1087351247.jpg);
background-repeat: repeat;
}
p {
background-color: #C7FFEC;
}
</style>
</head>
<body>
<p>如何重複背景影象</p>
</body>
</html>
05如何在垂直方向重複背景影象
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>05如何在垂直方向重複背景影象</title>
<style>
body {
background-image: url(http://images2015.cnblogs.com/blog/846157/201511/846157-20151129190113985-22881767.png);
background-repeat: repeat-y;
}
p {
background-color: #C7FFEC;
}
</style>
</head>
<body>
<p>如何在垂直方向重複背景影象</p>
</body>
</html>
06如何在水平方向重複背景影象
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>06如何在水平方向重複背景影象</title>
<style>
body {
background-image: url(http://images2015.cnblogs.com/blog/846157/201511/846157-20151129190113985-22881767.png);
background-repeat: repeat-x;
}
p {
background-color: #C7FFEC;
}
</style>
</head>
<body>
<p>如何在水平方向重複背景影象</p>
</body>
</html>
07如何僅顯示一次背景影象
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>07如何僅顯示一次背景影象</title>
<style type="text/css">
body {
background-image: url(http://images2015.cnblogs.com/blog/846157/201512/846157-20151203170936299-1397498783.jpg);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<p>如何僅顯示一次背景影象</p>
</body>
</html>
08如何放置背景影象
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>08如何放置背景影象</title>
<style type="text/css">
body {
background-image: url(http://images2015.cnblogs.com/blog/846157/201512/846157-20151203221303643-1294680219.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
</style>
</head>
<body>
<p><b>提示:</b>您需要把 background-attachment 屬性設定為 "fixed"，
才能保證該屬性在 Firefox 和 Opera 中正常工作。
</p>
</body>
</html>
09如何使用%來定位背景影象
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>09如何使用%來定位背景影象</title>
<style type="text/css">
body {
background-image: url(http://images2015.cnblogs.com/blog/846157/201512/846157-20151203223328455-392590785.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 30% 20%;
}
</style>
</head>
<body>
<p><b>註釋：</b>為了在 Mozilla 中實現此效果，
background-attachment 屬性必須設定為 "fixed"。
</p>
</body>
</html>
10如何使用畫素來定位背景影象
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>10如何使用畫素來定位背景影象</title>
<style type="text/css">
body {
background-image: url(http://images2015.cnblogs.com/blog/846157/201512/846157-20151204104330361-341448993.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 200px 50px;
}
</style>
</head>
<body>
<p><b>註釋：</b>為了在 Mozilla 中實現此效果，
background-attachment 屬性必須設定為 "fixed"。
</p>
</body>
</html>
11如何設定固定的背景影象
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>11如何設定固定的背景影象</title>
<style type="text/css">
body {
background-image: url(http://images2015.cnblogs.com/blog/846157/201512/846157-20151204105729486-1236967824.jpg);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<p>影象不會隨頁面的其餘部分滾動。</p>
<p>影象不會隨頁面的其餘部分滾動。</p>
<p>影象不會隨頁面的其餘部分滾動。</p>
<p>影象不會隨頁面的其餘部分滾動。</p>
<p>影象不會隨頁面的其餘部分滾動。</p>
<p>影象不會隨頁面的其餘部分滾動。</p>
<p>影象不會隨頁面的其餘部分滾動。</p>
<p>影象不會隨頁面的其餘部分滾動。</p>
<p>影象不會隨頁面的其餘部分滾動。</p>
<p>影象不會隨頁面的其餘部分滾動。</p>
<p>影象不會隨頁面的其餘部分滾動。</p>
<p>影象不會隨頁面的其餘部分滾動。</p>
<p>影象不會隨頁面的其餘部分滾動。</p>
<p>影象不會隨頁面的其餘部分滾動。</p>
<p>影象不會隨頁面的其餘部分滾動。</p>
<p>影象不會隨頁面的其餘部分滾動。</p>
<p>影象不會隨頁面的其餘部分滾動。</p>
<p>影象不會隨頁面的其餘部分滾動。</p>
<p>影象不會隨頁面的其餘部分滾動。</p>
<p>影象不會隨頁面的其餘部分滾動。</p>
<p>影象不會隨頁面的其餘部分滾動。</p>
<p>影象不會隨頁面的其餘部分滾動。</p>
<p>影象不會隨頁面的其餘部分滾動。</p>
<p>影象不會隨頁面的其餘部分滾動。</p>
</body>
</html>
12所有背景屬性在一個宣告之中
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>12所有背景屬性在一個宣告之中</title>
<style type="text/css">
body {
background: #C7FFEC url(http://images2015.cnblogs.com/blog/846157/201512/846157-20151204114642596-26790260.jpg) no-repeat fixed center;
}
</style>
</head>
<body>
<p>這是一些文字。</p>
<p>這是一些文字。</p>
<p>這是一些文字。</p>
<p>這是一些文字。</p>
<p>這是一些文字。</p>
<p>這是一些文字。</p>
<p>這是一些文字。</p>
<p>這是一些文字。</p>
<p>這是一些文字。</p>
<p>這是一些文字。</p>
<p>這是一些文字。</p>
<p>這是一些文字。</p>
<p>這是一些文字。</p>
<p>這是一些文字。</p>
<p>這是一些文字。</p>
<p>這是一些文字。</p>
<p>這是一些文字。</p>
<p>這是一些文字。</p>
<p>這是一些文字。</p>
<p>這是一些文字。</p>
<p>這是一些文字。</p>
<p>這是一些文字。</p>
<p>這是一些文字。</p>
<p>這是一些文字。</p>
</body>
</html>
CSS背景例項總結：
