繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS教程(4)：通过实例学习CSS背景
- CSS样式表
- 面向对象的CSS应用
- css 文字按钮实现样式submit按钮以文本的形式显示出来
- CSS 选择符的用法和实例
- CSS a:hover伪类在IE6下的问题
- IE6下CSS定义DIV高度的问题
- CSS网页实例 利用box-sizing实现div仿框架结构实现代码
- CSS样式表与HTML网页的关系分析
- 设计稿进行页面制作的流程和注意事项
- CSS压缩的技巧与工具
- CSS @font-face属性实现在网页中嵌入任意字体
- 通过css样式控制单元格文本超长省略
- 运用比较纯的CSS打造很Web2.0的按钮
- CSS expression 隔行换色效果
- CSS 制作有弹性的日历表
- CSS Cookbook创建水平导航菜单
- CSS Cookbook 创建文字导航菜单和翻转特效
- 区别div和span、relative和absolute、display和visibility
- 让页脚紧贴页面底部的CSS代码
- Firefox下div层被Flash遮住的解决方法
- ins标签什么时候使用
CSS样式表 中的 CSS教程(4)：通过实例学习CSS背景
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-09 浏览: 46 ::
收藏到网摘: n/a
本教程介绍：1.如何仅显示一次背景图像，2.如何放置背景图像，3.如何使用%来定位背景图像。
参考软晨学习网关于CSS背景的理论知识：CSS教程(1)：学习CSS背景相关知识。
1、如何仅显示一次背景图像
本例演示如何仅显示一次背景图像。
<html>
<head>
<style type="text/css">
body
{
background-image: url('/i/eg_bg_03.gif');
background-repeat: no-repeat
}
</style>
</head>
<body>
</body>
</html>
2、如何放置背景图像
本例演示如何在页面上放置背景图像。看到本信息说明该文是通过网页教学（ruanchen.com）整理发布的，请不要删掉！
<html>
<head>
<style type="text/css">
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
</style>
</head>
<body>
<body>
<p><b>注释：</b>为了在 Mozilla 中实现此效果，background-attachment 属性必须设置为 "fixed"。</p>
</body>
</body>
</html>
3、如何使用%来定位背景图像
本例演示如何使用百分比来在页面上定位背景图像。
<html>
<head>
<style type="text/css">
body
{
background-image: url('/i/eg_bg_03.gif');
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 30% 20%;
}
</style>
</head>
<body>
<p><b>注释：</b>为了在 Mozilla 中实现此效果，background-attachment 属性必须设置为 "fixed"。</p>
</body>
</html>
评论 (0) All
