Background背景 设置背景颜色
body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} This is header 1 This is header 2
This is a paragraph
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
设置一张图片做为背景
body { background-image: url('http://www.blueidea.com/articleimg/2006/07/3744/bgdesert.jpg') }
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
垂直重复背景图片
body { background-image: url('http://www.blueidea.com/articleimg/2006/07/3744/bgdesert.jpg'); background-repeat: repeat }
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
水平重复背景图片
body { background-image: url('http://www.blueidea.com/articleimg/2006/07/3744/bgdesert.jpg'); background-repeat: repeat-x }
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
怎样放置背景图片（位置摆放）
body { background-image: url('http://www.blueidea.com/articleimg/2006/07/3744/bgdesert.jpg'); background-repeat: no-repeat; background-position: center; }
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
背景不滚动
body { background-image: url('http://www.blueidea.com/articleimg/2006/07/3744/smiley.gif'); background-repeat: no-repeat; background-attachment: fixed }
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
背景属性一行解决（用一行文字定义背景属性）
body { background: #00ff00 url('http://www.blueidea.com/articleimg/2006/07/3744/smiley.gif') no-repeat fixed center; }
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
【CSS 实用实例(推荐)】相关文章：