易网时代-编程资源站
Welcome
首页
/
脚本样式
/
CSS
/
CSS 实用实例（推荐）
Background 背景 设置背景颜色
<html> <head> <style type="text/css"> body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb（250,0,255）} </style> </head> <body> <h1>This is header 1</h1> <h2>This is header 2</h2> This is a paragraph<br/> </body> </html>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
设置一张图片做为背景
<html> <head> <style type="text/css"> body{ background-image: url（"http://www.blueidea.com/articleimg/2006/07/3744/bgdesert.jpg"） } </style> </head> <body> </body> </html>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
垂直重复背景图片
<html> <head> <style type="text/css"> body {background-image:url（"http://www.blueidea.com/articleimg/2006/07/3744/bgdesert.jpg"）; background-repeat: repeat } </style> </head> <body> </body> </html>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
水平重复背景图片
<html> <head> <style type="text/css"> body {background-image:url（"http://www.blueidea.com/articleimg/2006/07/3744/bgdesert.jpg"）; background-repeat: repeat-x } </style> </head> <body> </body> </html>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
怎样放置背景图片（位置摆放）
<html> <head> <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> </head> <body> </body> </html>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
背景不滚动
<html> <head> <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> </head> <body> The image will not scroll with the rest of the page<br/> The image will not scroll with the rest of the page<br/> The image will not scroll with the rest of the page<br/> The image will not scroll with the rest of the page<br/> The image will not scroll with the rest of the page<br/> The image will not scroll with the rest of the page<br/> The image will not scroll with the rest of the page<br/> The image will not scroll with the rest of the page<br/> The image will not scroll with the rest of the page<br/> The image will not scroll with the rest of the page<br/> The image will not scroll with the rest of the page<br/> The image will not scroll with the rest of the page<br/> The image will not scroll with the rest of the page<br/> The image will not scroll with the rest of the page<br/> The image will not scroll with the rest of the page<br/> The image will not scroll with the rest of the page<br/> The image will not scroll with the rest of the page<br/> The image will not scroll with the rest of the page<br/> The image will not scroll with the rest of the page<br/> The image will not scroll with the rest of the page<br/> The image will not scroll with the rest of the page<br/> The image will not scroll with the rest of the page<br/> The image will not scroll with the rest of the page<br/> The image will not scroll with the rest of the page<br/> </body> </html>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
背景属性一行解决（用一行文字定义背景属性）
<html> <head> <style type="text/css"> body {background: #00ff00 url（"http://www.blueidea.com/articleimg/2006/07/3744/smiley.gif"） no-repeat fixed center;} </style> </head> <body> This is some text<br/> This is some text<br/> This is some text<br/> This is some text<br/> This is some text<br/> This is some text<br/> This is some text<br/> This is some text<br/> This is some text<br/> This is some text<br/> This is some text<br/> This is some text<br/> This is some text<br/> This is some text<br/> This is some text<br/> This is some text<br/> This is some text<br/> This is some text<br/> This is some text<br/> This is some text<br/> This is some text<br/> This is some text<br/> This is some text<br/> This is some text<br/> </body> </html>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
版权所有©石家庄振强科技有限公司2024
冀ICP备08103738号-5
网站地图
易网时代-编程资源站
易网时代-编程资源站