网站首页
无损音乐
高清电影
游戏新闻
动漫资讯
破解资源
站长资源
游戏攻略
CSS 实用实例(推荐)
网络编程 发布日期：2025/1/8 浏览次数：
1
正在浏览：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> <p>This is a paragraph</p> </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> <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> </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> <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> </body> </html>
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
上一篇：
给超级链接增加其他样式
下一篇：
css静态滤镜
首页
无损音乐
高清电影
破解资源