背景图片在Dreamweaver中的应用 (一)

打开dreamweaver,[各个版本的处理方法基本相同] 本文采用 Dreamweaver 8 进行说明。



准备好背景图片 6-4.gif




一.设置网页背景
1.点击菜单栏中的[修改]-[页面属性],弹出属性对话框。


2.点击浏览,选择本地背景图片,下方的[重复]按钮,控制背景是否重复铺满页面。默认为重复。





看看效果



css中的代码为:body { background-image: url(jcimg/6-4.gif); }
  
3.在[重复]栏中选择[横向重复]或[纵向重复],会有这样的效果....

   


css中的代码分别为:
body {
background-image: url(jcimg/6-4.gif);
background-repeat: repeat-x;
}

....................................
body {
background-image: url(jcimg/6-4.gif);
background-repeat: repeat-y;
}



4.在[重复]栏中选择[不重复],背景只出现一次....




css中的代码为:
body {
background-image: url(jcimg/6-4.gif);
background-repeat: no-repeat;
}


5.我只要背景出现一次,而且在页面右下角....




css中的代码为:
body {
background-image: url(jcimg/6-4.gif);
background-repeat: no-repeat;
background-position: bottom right;
}


6.如果拖动滚动条时,希 望背景是静止不动,该怎么做呢? body {
background-image: url(jcimg/6-4.gif);
background-repeat: repeat;
background-attachment:fixed;
}



  • 发布时间:2012-07-16
  • 阅读次数:4416