软件发布| 专题库| 优优资讯| 苹果专区| 安卓专区| 软件下载| 首页
优优资讯 电脑教程 安卓教程 安卓攻略 苹果教程 苹果攻略 新闻资讯

Dreamweaver教程之背景属性background简介

时间:2015-03-04 来源:本站整理 我要评论

  “鲜花需要绿叶衬”这句俗语我们再熟悉不过,其实,在网页设计时也是如此,文字、图片设计得再漂亮,如果背景不合适也是徒然。今天我们就来介绍CSS中一块很重要的内容--背景属性background。

  1.背景颜色属性(background-color)

  body { background-color:red  ;}

  2.背景图片(background-image)

  body { background-image:url(http://www.xiazaiba.com/images/logo.gif);}

  如你所见,默认情况下背景图片会不断重复,直到布满整个网页,下面我们来看看如何用CSS控制背景图片的重复。

  3.背景图片的重复设置(background-repeat)

  (1)不重复

  body { background-image:url(http://www.xiazaiba.com/images/logo.gif);

  background-repeat:no-repeat; }

  (2)水平方向重复

  body { background-image:url(http://www.xiazaibaba.com/images/logo.gif);

  background-repeat:repeat-x;}

  (3)垂直方向重复

  body { background-image:url(http://www.xiazaiba.com/images/logo.gif);

  background-repeat:repeat-y;}

  4.背景图片位置(background-position)

  body { background-image:url(http://www.xiazaiba.com/images/logo.gif);

  background-position:center;

  background-repeat:no-repeat;}

  5.将背景图片固定在某个位置(background-attachment)

  该属性可以定义背景图片是否随着滚动条的滚动而改变位置。

  body { background-image:url(http://www.xiazaiba.com/images/logo.gif);

  background-attachment:fixed;

  background-repeat:no-repeat }
 

用户评论

(已有0条评论)
表情
注:您的评论需要经过审核才能显示哦,请文明发言!
还没有评论,快来抢沙发吧!
快速检索
0-9 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z