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>
![846157-20151129153308766-1304207656.jpg](https://images2015.cnblogs.com/blog/846157/201511/846157-20151129153308766-1304207656.jpg)
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>
![846157-20151129163540766-1193703666.jpg](https://images2015.cnblogs.com/blog/846157/201511/846157-20151129163540766-1193703666.jpg)
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>
![846157-20151129175608688-220083687.jpg](https://images2015.cnblogs.com/blog/846157/201511/846157-20151129175608688-220083687.jpg)
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>
![846157-20151129183906532-756213366.png](https://images2015.cnblogs.com/blog/846157/201511/846157-20151129183906532-756213366.png)
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>
![846157-20151129190231797-2082159112.png](https://images2015.cnblogs.com/blog/846157/201511/846157-20151129190231797-2082159112.png)
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>
![846157-20151129190428532-67800322.png](https://images2015.cnblogs.com/blog/846157/201511/846157-20151129190428532-67800322.png)
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>
![846157-20151203171032846-1989346201.png](https://images2015.cnblogs.com/blog/846157/201512/846157-20151203171032846-1989346201.png)
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>
![846157-20151203221516049-993471095.png](https://images2015.cnblogs.com/blog/846157/201512/846157-20151203221516049-993471095.png)
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>
![846157-20151203223307830-24420502.png](https://images2015.cnblogs.com/blog/846157/201512/846157-20151203223307830-24420502.png)
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>
![846157-20151204104314814-1885729111.png](https://images2015.cnblogs.com/blog/846157/201512/846157-20151204104314814-1885729111.png)
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>
![846157-20151204105659455-2084230977.png](https://images2015.cnblogs.com/blog/846157/201512/846157-20151204105659455-2084230977.png)
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>
![846157-20151204114617393-1189689085.png](https://images2015.cnblogs.com/blog/846157/201512/846157-20151204114617393-1189689085.png)
CSS背景实例总结:
![846157-20151204121121861-1283884456.png](https://images2015.cnblogs.com/blog/846157/201512/846157-20151204121121861-1283884456.png)