CSS 实用实例(推荐)

background 背景 设置背景颜色

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <style type="text/css"> body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} </style> <h1>this is header 1</h1> <h2>this is header 2</h2> <p>this is a paragraph</p>
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]

设置一张图片做为背景

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <style type="text/css"> body { background-image: url('http://www.blueidea.com/articleimg/2006/07/3744/bgdesert.jpg') } </style>
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]

垂直重复背景图片

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <style type="text/css"> body { background-image: url('http://www.blueidea.com/articleimg/2006/07/3744/bgdesert.jpg'); background-repeat: repeat } </style>
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]

水平重复背景图片

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <style type="text/css"> body { background-image: url('http://www.blueidea.com/articleimg/2006/07/3744/bgdesert.jpg'); background-repeat: repeat-x } </style>
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]

怎样放置背景图片（位置摆放）

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <style type="text/css"> body { background-image: url('http://www.blueidea.com/articleimg/2006/07/3744/bgdesert.jpg'); background-repeat: no-repeat; background-position: center; } </style>
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]

背景不滚动

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <style type="text/css"> body { background-image: url('http://www.blueidea.com/articleimg/2006/07/3744/smiley.gif'); background-repeat: no-repeat; background-attachment: fixed } </style> <p>the image will not scroll with the rest of the page</p> <p>the image will not scroll with the rest of the page</p> <p>the image will not scroll with the rest of the page</p> <p>the image will not scroll with the rest of the page</p> <p>the image will not scroll with the rest of the page</p> <p>the image will not scroll with the rest of the page</p> <p>the image will not scroll with the rest of the page</p> <p>the image will not scroll with the rest of the page</p> <p>the image will not scroll with the rest of the page</p> <p>the image will not scroll with the rest of the page</p> <p>the image will not scroll with the rest of the page</p> <p>the image will not scroll with the rest of the page</p> <p>the image will not scroll with the rest of the page</p> <p>the image will not scroll with the rest of the page</p> <p>the image will not scroll with the rest of the page</p> <p>the image will not scroll with the rest of the page</p> <p>the image will not scroll with the rest of the page</p> <p>the image will not scroll with the rest of the page</p> <p>the image will not scroll with the rest of the page</p> <p>the image will not scroll with the rest of the page</p> <p>the image will not scroll with the rest of the page</p> <p>the image will not scroll with the rest of the page</p> <p>the image will not scroll with the rest of the page</p> <p>the image will not scroll with the rest of the page</p>
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]

背景属性一行解决（用一行文字定义背景属性）

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <style type="text/css"> body { background: #00ff00 url('http://www.blueidea.com/articleimg/2006/07/3744/smiley.gif') no-repeat fixed center; } </style> <p>this is some text</p> <p>this is some text</p> <p>this is some text</p> <p>this is some text</p> <p>this is some text</p> <p>this is some text</p> <p>this is some text</p> <p>this is some text</p> <p>this is some text</p> <p>this is some text</p> <p>this is some text</p> <p>this is some text</p> <p>this is some text</p> <p>this is some text</p> <p>this is some text</p> <p>this is some text</p> <p>this is some text</p> <p>this is some text</p> <p>this is some text</p> <p>this is some text</p> <p>this is some text</p> <p>this is some text</p> <p>this is some text</p> <p>this is some text</p>
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]