`
hideto
  • 浏览: 2645610 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

精通CSS+DIV:5,用CSS设置网页背景

    博客分类:
  • CSS
阅读更多
一、背景颜色
1,页面背景色
body {
  background-color: #5b8a00;
}

2,使用背景色给页面分块
body {
  background-color: #ffebe5;
}
.topbanner {
  background-color: #fbc9ba;
}
.leftbanner {
  background-color: #6d1700;
}

二、背景图片
1,页面背景图
body {
  background-image: url(test.jpg);
}

2,背景图的重复
body {
  background-image: url(test.jpg);
  background-repeat: repeat-y;
}

3,背景图的位置
body {
  background-image: url(test.jpg);
  background-repeat: no-repeat;
  background-position: bottom right;
}

body {
  background-image: url(test.jpg);
  background-repeat: no-repeat;
  background-position: 30% 70%
}

body {
  background-image: url(test.jpg);
  background-repeat: no-repeat;
  background-position: 300px 25px;
}

4,固定背景图片
body {
  background-image: url(test.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

5,添加多个背景图片
body {
  background-image: url(test1.jpg);
}
div {
  background-iamge: url(test2.jpg);
}

6,背景样式综合设置
body {
  background: blue url(test.jpg) no-repeat fixed 5px 10px;
}

类似于border、font等属性,可以将多个设置集成到一个语句中以节省代码,加快网络下载速度
分享到:
评论
1 楼 goagrass 2008-08-21  
CSS背景图片的设置
http://www.cssplay.org.cn/css-tutorial/20080807/632.html

CSS背景图片的运用
http://www.cssplay.org.cn/css-example/20080807/631.html

网页中CSS背景图片实现方法
http://www.cssplay.org.cn/css-tutorial/20080807/630.html

相关推荐

    《精通CSS+DIV网页样式与布局》光盘源码

     第5章 用CSS设置网页中的背景   5.1 背景颜色   5.2 背景图片   5.3 背景综合一:我的个人主页   5.4 背景综合二:古词《念奴娇·赤壁怀古》   第6章 用CSS设置表格与表单的样式   6.1 控制...

    精通css+div 网页样式与布局 ppt文件

    正在学习css+div的朋友应该都知道这几本书吧,《精通css+div 网页样式与布局》还有《css设计彻底研究》这些书都非常好,现在将《精通css+div 网页样式与布局》的ppt文件传上来,这样大家就可以不用买实体书了,至于...

    精通CSS+DIV网页样式与布局全集

    4.2.1 横向对齐方式 4.2.2 纵向对齐方式 4.3 图文混排 4.3.1 文字环绕 4.3.2 设置图片与文字间距 4.4 图文实例:八仙过海 第5章 用CSS设置网页中的背景 5.1 背景颜色 5.1.1 页面背景色 5.1.2 用...

    精通CSS+DIV样式和布局详细源码

     本书系统地讲解了CSS层迭样式表的基础理论和实际运用技术,通过大量实例对CSS进行深入浅出的分析,主要包括CSS的基本语法和概念,设置文字、图片、背景、表格、表单和菜单等网页元素的方法,以及CSS滤镜的使用。...

    精通CSS+DIV网页样式与布局视频教材

    精通CSS+DIV网页样式与布局 视频教材主要内容 迅雷下载地址: 目录 第1部分 CSS基础知识篇 第1章 CSS的初步体验 1.1 CSS的概念 1.1.1 标记的概念 1.1.2 传统HTML的缺点 1.1.3 CSS的引入 1.1.4...

    精通CSS.DIV.网页样式与布局 源码

     第5章 用CSS设置网页中的背景   5.1 背景颜色   5.2 背景图片   5.3 背景综合一:我的个人主页   5.4 背景综合二:古词《念奴娇·赤壁怀古》   第6章 用CSS设置表格与表单的样式   6.1 ...

    精通CSS+DIV网页样式与布局

     第5章 用CSS设置网页中的背景   5.1 背景颜色   5.2 背景图片   5.3 背景综合一:我的个人主页   5.4 背景综合二:古词《念奴娇·赤壁怀古》   第6章 用CSS设置表格与表单的样式   6.1 控制...

    [精通CSS.DIV.网页样式与布局].(前沿科技).扫描版

    设置网页背景 - CSS/DIV布局专题讲解 - 第2课 设置表格与表单的样式 - CSS/DIV布局专题讲解 - 第3课 设置页面和浏览器的元素 - CSS/DIV布局专题 - 第4课 用CSS制作漂亮的菜单- CSS/DIV布局专题讲解 - 第5课 CSS...

    精通CSS+DIV网页样式与布局Part1

     第5章 用CSS设置网页中的背景   5.1 背景颜色   5.2 背景图片   5.3 背景综合一:我的个人主页   5.4 背景综合二:古词《念奴娇·赤壁怀古》   第6章 用CSS设置表格与表单的样式   6.1 控制...

    精通CSS+DIV网页样式与布局PART3

    4.2.1 横向对齐方式 4.2.2 纵向对齐方式 4.3 图文混排 4.3.1 文字环绕 4.3.2 设置图片与文字间距 4.4 图文实例:八仙过海 第5章 用CSS设置网页中的背景 5.1 背景颜色 5.1.1 页面背景色 5.1.2 用...

    精通CSS+DIV网页样式与布局PART2

    4.2.1 横向对齐方式 4.2.2 纵向对齐方式 4.3 图文混排 4.3.1 文字环绕 4.3.2 设置图片与文字间距 4.4 图文实例:八仙过海 第5章 用CSS设置网页中的背景 5.1 背景颜色 5.1.1 页面背景色 5.1.2 用...

    精通CSS.DIV.网页样式与布局

    第5章 用css设置网页中的背景 第6章 用css设置表格与表单的样式 第7章 用css设置页面和浏览器的元素 第8章 用css制作实用的菜单 第9章 css滤镜的应用 第2部分 css+div美化和布局篇 第10章 理解css定位与div布局 第11...

    精通CSS.DIV网页样式与布局视频01

     第5章 用CSS设置网页中的背景   5.1 背景颜色   5.2 背景图片   5.3 背景综合一:我的个人主页   5.4 背景综合二:古词《念奴娇·赤壁怀古》   第6章 用CSS设置表格与表单的样式   6.1 控制...

    《精通CSS.DIV网页样式与布局》配套视频教程

    本书系统地讲解了CSS层迭样式表的基础理论和实际运用技术,通过大量实例对CSS进行深入浅出的分析,主要包括CSS的基本语法和概念,设置文字、图片、背景、表格、表单和菜单等网页元素的方法,以及CSS滤镜的使用。...

    CSS+DIV从入门到精通

    使用选择器是件美妙的事 id的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标题、列表、图片、链接或者段落等等

    精通CSS.DIV.网页样式与布局-前沿科技.part2

    系统地讲解了CSS层叠样式表的基础理论和实际运用技术,通过大量实例对CSS进行深入浅出的分析,主要包括CSS的基本语法和概念,设置文字、图片、背景、表格、表单和菜单等网页元素的方法,以及CSS滤镜的使用。...

    精通CSS.DIV.网页样式与布局-前沿科技.part1

    系统地讲解了CSS层叠样式表的基础理论和实际运用技术,通过大量实例对CSS进行深入浅出的分析,主要包括CSS的基本语法和概念,设置文字、图片、背景、表格、表单和菜单等网页元素的方法,以及CSS滤镜的使用。...

    HTML5+CSS3+JavaScript网页设计8.zip

    《精通HTML5 + CSS3+JavaScript网页设计》内容主要包括CSS3的基本语法和概念,设置文字、段落、图片、背景、表格、表单和菜单等网页元素的方法,以及CSS3滤镜的应用。重点介绍如何使用DlV+CSS3进行网页布局,注重...

Global site tag (gtag.js) - Google Analytics