CSS教程(5)：通过实例学习CSS背景

本CSS教程介绍：1.如何使用像素来定位背景图像，2.如何设置固定的背景图像，3.所有背景属性在一个声明之中。本CSS教程介绍：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;background-attachment:fixed;background-position: 50px 100px;}</style></head><body>注释：为了在 Mozilla 中实现此效果，background-attachment 属性必须设置为 "fixed"。</body></html> 2、如何设置固定的背景图像本例演示如何设置固定的背景图像。图像不会随着页面的其他部分滚动。本文由脚本之家jb51.net整理发布！转载请注明出处，谢谢！ <html><head><style type="text/css">body {background-image:url(/i/eg_bg_02.gif);background-repeat:no-repeat;background-attachment:fixed}</style></head><body>图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。</body></html> 3、所有背景属性在一个声明之中本例演示如何使用简写属性来将所有背景属性设置在一个声明之中。 <html><head><style type="text/css">body{ background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center; }</style></head><body>这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。</body></html>

　　推荐阅读

　　CSS设计制作长度高度不一样的网页区块

网页每个区域模块的长度和高度不一,用css怎么实现这种类似组件让其具有扩展性呢? 经常在网站上会发现如下图这样的常用组件模块,这也是我最近做的一个网站项目,我把我>>>详细阅读

本文标题：CSS教程(5)：通过实例学习CSS背景

地址：http://www.17bianji.com/kaifa2/CSS/17063.html

1/2 1