SEO中国站 | SEO有问必答      SEO中国站专注为企业提供搜索引擎优化(SEO)服务,中国SEO服务诚信高效品牌      关于我们 | 客户服务 | 联系方式 | 加入收藏 | RSS订阅
SEO中国站专业为中小型企业提供SEO服务搜索引擎优化中国SEO在线诚信服务平台,如需更多咨询和交流,请点击客户服务中心交谈!
域名主机 网络安全 网站运营HTML/DIV+CSS ASP/ASP.NET PHP编程 Access/Mysql
返回首页
当前位置: 首页 > 网站建设 > HTML/DIV+CSS >

CSS背景属性

时间:2010-03-08 16:17来源:SEO中国站 作者:seocnz 点击:
背景颜色属性(background-color) 这个属性为HTML元素设定背景颜色,相当于HTML中bgcolor属性。 body {background-color:#99FF00;} 上面的代码表示Body这个HTML元素的背景颜色是翠绿色的。 背景图片属性(background-image) 这个属性为HTML元素设定背景图片,
  

背景颜色属性(background-color)

这个属性为HTML元素设定背景颜色,相当于HTML中bgcolor属性。

body {background-color:#99FF00;}

上面的代码表示Body这个HTML元素的背景颜色是翠绿色的。

 

背景图片属性(background-image)

这个属性为HTML元素设定背景图片,相当于HTML中background属性。

<body style="background-image:url(../images/css_tutorials/background.jpg)">

上面的代码为Body这个HTML元素设定了一个背景图片。

 

背景重复属性(background-repeat)

这个属性和background-image属性连在一起使用,决定背景图片是否重复。SEO中国站提醒,如果只设置background-image属性,没设置background-repeat属性,在缺省状态下,图片既横向重复,又竖向重复。

  • repeat-x 背景图片横向重复
  • repeat-y 背景图片竖向重复
  • no-repeat 背景图片不重复
body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:repeat-y}

上面的代码表示图片竖向重复。

 

背景附着属性(background-attachment)

这个属性和background-image属性连在一起使用,决定图片是跟随内容滚动,还是固定不动。这个属性有两个值,一个是scroll,一个是fixed。缺省值是scroll。

body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:no-repeat; background-attachment:fixed}

上面的代码表示图片固定不动,不随内容滚动而动。

 

背景位置属性(background-position)

这个属性和background-image属性连在一起使用,决定了背景图片的最初位置。

body {background-image:url(../images/css_tutorials/background.jpg);background-repeat:no-repeat; background-position:20px 60px}

上面的代码表示背景图片的初始位置距离网页最左面20px,距离网页最上面60px。

 

背景属性(background)

这个属性是设置背景相关属性的一种快捷的综合写法, 包括background-color, background-image, background-repeat, backgroundattachment, background-position。

body {background:#99FF00 url(../images/css_tutorials/background.jpg) no-repeat fixed 40px 100px}

上面的代码表示,网页的背景颜色是翠绿色,背景图片是background.jpg图片,背景图片不重复显示,背景图片不随内容滚动而动,背景图片距离网页最左面40px,距离网页最上面100px。

 

文章出处:www.seocnz.com
SEO中国站专注企业SEO服务SEO优化,中国SEO诚信服务品牌。
本文seocnz保留所有,转载请以连接形式注明出处。


------分隔线----------------------------

------分隔线----------------------------
发表评论
请自觉遵守互联网相关政策法规,作者管理后台可以删除恶意评论、广告和违禁词语。。
验证码:点击我更换图片
推荐内容
  • CSS长度单位参考

    在CSS样式表中,我们经常会看到pt, px,em,ex,in等这类长度单位。它们各是什么意思...

  • CSS属性参考

    SEO 中国站所知,该CSS属性参考是根据W3C的CSS2标准的属性参考说明和微软的CSS属性参...

  • CSS伪类(pseudo-class)

    和一般的CSS语法不同(参见 SEO中国站 CSS语法),CSS伪类的语法有两种。 第一种: sele...

  • CSS列表属性(list-style)

    列表样式类型属性(list-style-type) 这个属性用来设定列表项标记(list-item marker)的...

  • CSS盒子模式(Box Model)

    SEO 中国站详细介绍下,什么是盒子模式,在CSS 中有个重要的概念,就是盒子模式 (Box ...

  • CSS间隙属性(padding)

    间隙属性(padding)是用来设置元素内容到元素边界的距离。 左间隙属性(padding-left) ...

SEO服务