网页设计中背景图片的重复

  • 2019-12-31 10:35:50
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.zwxs1.com

网页设计中,CSS使用background-repeat属性来定义背景图片的重复,该属性用法如下:

background-repeat:repeat-x|repeat-y|no-repeat

background-repeat属性的3个取值作用如下。   

?repeat-x:图片在x轴方向上重复。

?repeat-y:图片在y轴方向上重复。   

?no-repeat:不平铺,图片只显示一次。

【示例】启动Dreamweaver,新建一个网页,保存为test.html,输入以下内容:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>body {    

background-image: url(images/bg.jpg);     /*页面背景图片*/    

background-repeat: repeat-y;              /*页面背景图片纵向重复*/}

</style>

</head>

<body>

</body>

</html>

显示结果如图1所示,背景图片在设计网页时纵向上进行了重复显示。背景的原图如图2所示。其实际高度为1像素,这里为了让读者看得清楚,因此将其放大了。

提示:网站建设时,如果是要设置两个方向上的平铺,就不需要设置属性值,这时CSS会采用默认的向横向和纵向两个方向重复的效果。但是,如果手动地设置repeat-x和repeat-y的两个值的话,那么系统会自动认定后设的一种平铺方式有效,只会向一个方向平铺。

当前文章标题:网页设计中背景图片的重复

当前URL:http://www.zwxs1.com/news/wzzz/3151.html

上一篇:用CSS控制背景图像

下一篇:定义背景图片的位置

网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)
免费全部高h视频在线观看,国产精品v欧美精品v日本精品,亚洲性线免费观看视频成熟,老汉色av影院 网站地图