网站首页
高清电影
无损音乐
游戏攻略
电脑教程
破解资源
站长资源
软件下载
CSS 实用实例(推荐)
(编辑：jimmy 日期: 2025/4/6 浏览：
2
)
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静态滤镜
一句话新闻
Windows上运行安卓你用过了吗
在去年的5月23日，借助Intel Bridge Technology以及Intel Celadon两项技术的驱动，Intel为PC用户带来了Android On Windows（AOW）平台，并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版，将Windows与安卓两大生态进行了融合，PC的使用体验随即被带入到了一个全新的阶段。
最新资源
群星《奔赴！万人现场 第2期》[FLAC/分轨][518.8
群星《奇妙浪一夏 (上海迪士尼度假区音乐)》[32
群星《奇妙浪一夏 (上海迪士尼度假区音乐)》[FL
【古典音乐】詹姆斯·高威《季节》1993[WAV+CUE]
贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]
小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
群星《欢迎来到我身边 电影原声专辑》[320K/MP3
群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨
雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓
群星《2024好听新歌42》AI调整音效【WAV分轨】
首页
音乐
电影
资源