转至繁体中文版     | 网站首页 | 图文教程 | 资源下载 | 站长博客 | 图片素材 | 武汉seo | 武汉网站优化 | 
最新公告:     敏韬网|教学资源学习资料永久免费分享站!  [mintao  2008年9月2日]        
您现在的位置: 学习笔记 >> 图文教程 >> 站长学院 >> 网页制作 >> 正文
CSS背景background语法及实例介紹         ★★★★

CSS背景background语法及实例介紹

作者:闵涛 文章来源:闵涛的学习笔记 点击数:1251 更新时间:2009/6/9 2:31:14

一:background

语法:
 
background : background-color || background-image || background-repeat || background-attachment || background-position
 
参数:
 
该属性是复合属性。请参阅各参数对应的属性。
 
说明:
 
如使用该复合属性定义其单个参数,则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
默认值为:transparent none repeat scroll 0% 0%。
尽管该属性不可继承,但如果未指定,其父对象的背景颜色和背景图将在对象下面显示。
对应的脚本特性为background。请参阅我编写的其他书目。
 
示例:
 
div { background: red no-repeat scroll 5% 60%; }
body { background: url("images/aardvark.gif") repeat-y; }
pre { background: url("images/aardvark.gif") top; }
caption { background: fuchsia; }

二:background-attachment

语法:
 
background-attachment : scroll | fixed
 
参数:
 
scroll :  背景图像是随对象内容滚动
fixed :  背景图像固定
 
说明:
 
设置或检索背景图像是随对象内容滚动还是固定的。
对应的脚本特性为backgroundAttachment。请参阅我编写的其他书目。
 
示例:
 
html { background-image: url("anasazi.tif"); background-attachment: fixed; }

三:background-color

语法:
 
background-color : transparent | color
 
参数:
 
transparent :  背景色透明
color :  指定颜色。请参阅颜色单位和附录:颜色表
 
说明:
 
设置或检索对象的背景颜色。
对应的脚本特性为backgroundColor。请参阅我编写的其他书目。
 
示例:
 
p { background-color: silver }
div { background-color: rgb(223,71,177) }
body { background-color: #98AB6F }
pre { background-color: transparent; }

四:background-image

语法:
 
background-image : none | url (url)
 
参数:
 
none :  无背景图
url :  使用绝对或相对地址指定背景图像
 
说明:
 
设置或检索对象的背景图像。
对应的脚本特性为backgroundImage。请参阅我编写的其他书目。
 
示例:
 
code { background-image: url("comet.jpg"); }
blockquote { background-image: url("http://www.dzwebs.net/ImageFile/121.gif"); }
br { background-image: url(http://www.dzwebs.net/ImageFile/123.gif); }
body { background-image: none; } 

五:background-position

语法:
 
background-position : length || length
background-position : position || position
 
参数:
 
length :  百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位
position :  top | center | bottom | left | center | right
 
说明:
 
设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为:(0% 0%)。
如果只指定了一个值,该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。
该属性定位不受对象的补丁属性(padding)设置影响。
对应的脚本特性为backgroundPosition。请参阅我编写的其他书目。
 
示例:
 
div { background: url("images/123.gif"); background-position: 35% 80%; }
menu { background: url("images/456.gif"); background-position: 35% 2.5cm; }
a { background: url("images/789.gif"); background-position: 3.25in; }
body { background: url("images/aardvark.gif"); background-position: top right; }

六:background-positionX

语法:
 
background-positionX : length | left | center | right
 
参数:
 
length :  百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位
left :  居左
center :  居中
right :  居右
 
说明:
 
设置或检索对象的背景图像横坐标位置。必须先指定background-image属性。默认值为:0%。
该属性定位不受对象的补丁属性(padding)设置影响。
对应的脚本特性为backgroundPositionX。请参阅我编写的其他书目。
 
示例:
 
p { background-image: url("images/789.gif"); background-positionX: 35%; background-repeat:no-repeat; }

七:background-positionY

语法:
 
background-positionY : length | top | center | bottom
 
参数:
 
length :  百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位
top :  居顶
center :  居中
bottom :  居底
 
说明:
 
设置或检索对象的背景图像纵坐标位置。必须先指定background-image属性。默认值为:0%。
该属性定位不受对象的补丁属性(padding)设置影响。
对应的脚本特性为backgroundPositionY。请参阅我编写的其他书目。
 
示例:
 
p { background-image: url("图片地址"); background-positionY: 35%; background-repeat:no-repeat; }

八:background-repeat

语法:
 
background-repeat : repeat | no-repeat | repeat-x | repeat-y
 
参数:
 
repeat :  背景图像在纵向和横向上平铺
no-repeat :  背景图像不平铺
repeat-x :  背景图像在横向上平铺
repeat-y :  背景图像在纵向平铺
 
说明:
 
设置或检索对象的背景图像是否及如何铺排。必须先指定对象的背景图像。
对应的脚本特性为backgroundRepeat。请参阅我编写的其他书目。
 
示例:
 
menu { background: url("图片地址"); background-repeat: repeat-y; }
p { background: url("图片地址"); background-repeat: no-repeat; } 

九:layer-background-color

语法:
 
layer-background-color : transparent | color
 
参数:
 
transparent :  背景色透明
color :  指定颜色。请参阅颜色单位和附录:颜色表
 
说明:
 
设置或检索对象整个区域的背景颜色。
 
示例:
 
div { layer-background-color: transparent; }

十:layer-background-image

语法:
 
layer-background-image : none | url (url)
 
参数:
 
none :  无背景图
url :  使用绝对或相对地址指定背景图像
 
说明:
 
设置或检索对象整个区域的背景图像。
 
示例:
 
code { position: absolute; top: 100px; left: 300px; width: 200px; border: thin solid black; background-image: url("图片地址"); layer-background-image: url("图片地址"); }


[办公软件]将图片设置为PowerPoint的背景(PowerPoint背景的设…  [办公软件]Office(Word,Excel)密码破解软件(Office Password…
[办公软件]设置Powerpoint背景音乐逐渐淡入淡出  [办公软件]在多张PowerPoint幻灯片中连续播放背景音乐
[办公软件]利用PowerPoint自选图形的背景填充功能将图片裁剪…  [Web开发]NET实现文件上传CS源代码
[Web开发]增加或修改Session的会话时间  [Web开发]ASP.NET 2.0使用CSS失效的解决办法
[Web开发]设置GridView控件表头背景图片(前台设置)  [Web开发]设置GridView控件表头背景图片
教程录入:mintao    责任编辑:mintao 
  • 上一篇教程:

  • 下一篇教程:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
      注:本站部分文章源于互联网,版权归原作者所有!如有侵权,请原作者与本站联系,本站将立即删除! 本站文章除特别注明外均可转载,但需注明出处! [MinTao学以致用网]
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)

    同类栏目
    · Web开发  · 网页制作
    · 平面设计  · 网站运营
    · 网站推广  · 搜索优化
    · 建站心得  · 站长故事
    · 互联动态
    更多内容
    热门推荐 更多内容
  • 没有教程
  • 赞助链接
    更多内容
    闵涛博文 更多关于武汉SEO的内容
    500 - 内部服务器错误。

    500 - 内部服务器错误。

    您查找的资源存在问题,因而无法显示。

    | 设为首页 |加入收藏 | 联系站长 | 友情链接 | 版权申明 | 广告服务
    MinTao学以致用网

    Copyright @ 2007-2012 敏韬网(敏而好学,文韬武略--MinTao.Net)(学习笔记) Inc All Rights Reserved.
    闵涛 投放广告、内容合作请Q我! E_mail:admin@mintao.net(欢迎提供学习资源)

    站长:MinTao ICP备案号:鄂ICP备11006601号-18

    闵涛站盟:医药大全-武穴网A打造BCD……
    咸宁网络警察报警平台