当前位置:首页 >> 电脑基础知识 >>

css-基础格式设置3-css背景设置

2017—2018 第二学期《前端开发基础》

专 业: 实验 名称 实验 目的
知 识 提 示

学号:

姓名:

CSS 样式
掌握 CSS 各种选择器的用法;熟练使用 CSS 样式进行格式设计;使用 DIV+CSS 实 现页面布局; CSS 背景格式设置 top left top center top right center left center center center right bottom left bottom center bottom right 如果您仅规定了一个关键词,那么第二个值将是"center"。 默认值:0% 0% x% y% 第一个值是水平位置,第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值,另一个值将是 50%。 xpos ypos 第一个值是水平位置,第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值,另一个值将是 50%。 您可以混合使用 % 和 position 值。
详解: 一.background-position:left top;
背景图片的左上角和容器(container)的左上角对齐,超出的部分隐藏。等同于 background-position:0,0;也等同于 background-position:0%,0%; 二.background-position:right bottom;
背景图片的右下角和容器(container)的右下角对齐,超出的部分隐藏。等同于 background- positon:100%,100%;也等同于 background-positon:容器(container)的宽度背景图片的宽度,容器 (container)的高度-背景图片的高度 三.background-position:500px 15px;。
背景图片从容器(container)左上角的地方向右移 500px,向下移 15px,超出的部分 隐藏。 四.background-position:-500px -15px;。
背景图片从容器(container)左上角的地方向左移 500px,向上移 15px,超出的部 分隐藏。 五.background-position:50% 50%;。
等同于 left:{容器(container)的宽度—背景图片的宽度}*left 百分比,超出的部 分隐藏。等同于 right:{容器(container)的高度—背景图片的高度}*right 百分比,超 出的部分隐藏。

DQ

2018-03-13

2017—2018 第二学期《前端开发基础》
六.background-position:-50% -50%;。 等同于 left:-{{容器(container)的宽度—背景图片的宽度}*left 百分比(百分比都
取正值)},超出的部分隐藏。等同于 right:-{{容器(container)的高度—背景图片的高 度}*right 百分比(百分比都取正值)},超出的部分隐藏。
提示:利用 div 大小和十字架原理,可以用 background-position 属性实现大图里面抠 取小图。 项目 3:CSS 背景格式设置 练习 1:用背景相关属性,利用提供的素材,为对象添加背景图片并分别实现如下图 所示四个效果。

实 验 内 容
练习 2:使用背景定位属性 background-position: [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit 设置背景图片的位置,观察不同背景定位的显示效 果,理解各个定位属性值的作用。

练习 3:background-position 背景偏移技术实现从大图中控制显示部分小图

实例练习 1:

利用左图提供的素材,制作完成右图所示效果

素材

效果图

DQ

2018-03-13

2017—2018 第二学期《前端开发基础》

实例练习 2: 利用左图提供的素材,制作完成右图所示效果

素材

无修饰页面

效果图

202*300
实验 总结 教师 评阅

DQ

2018-03-13


相关文章:
网页设计与制作案例教程(HTML5+CSS3) 第3章 CSS样式基....ppt
步骤6 设置正文特殊段落(译文)样式 6 3.2 知识库:CSS语言的概念和基本结构 [!] CSS是一种标记性语言,用来对网页的布局、 字体、颜色、背景等效果实现精确的...
使用CSS3背景属性_图文.ppt
使用CSS3背景属性_动物植物_PPT模板_实用文档。html基础知识。 使用CSS3背景属性主讲人: 高洛峰 & 妹子 在CSS3中提供了多个背景属性,这里只介绍两个比较常用的...
第3章CSS样式表.ppt
CSS样式设置 1 类型 5.变量:设置文字变形的字体格式。此项在 Dreawmeaver8文档...3.重复:表示背景图像的填充方式,有四个选项: ?“不重复”:图像不重复,只是...
第05讲 CSS3入门与基础_图文.ppt
CSS2属性选择器应用格式 应用格 说明 式 E[attr]{r 选择具有 ules} attr...控制背景样式 CSS3在之前版本基础上对背景样式补充了一些新 的内容,追加了几个...
CSS教学课件-第3章-CSS样式1.ppt
CSS文字样式1 2页 免费 1-CSS样式基础 3页 免费 六1Dreamweaver8.0创建CSS....背景图像应该采用尺寸小的图片 ? 在保证效果的前提下,尽量使用下列格式 ? Jpeg...
HTML5+CSS3网站设计教程第6章 设置页面背景图像.ppt
6.2.1 控制页面背景颜色 背景颜色是网页中应用最基础的属性,使用CSS样式定义背景色除了十 六进制颜色值外,还可以使用更灵活的定义方式。 CSS背景属性定义颜色 6....
CSS3基础教程超详细_图文.ppt
⑵ 样式表基本格式中的type="text/css"用于说明这是一段CSS 规则代码。 ⑶ ...29 二. CSS的属性 1 2 3 4 5 设置字体样式 控制图文布局 颜色及背景 美化...
第三章 CSS基础.ppt
CSS网页设计基础本章要点: CSS概述 用CSS设置文字 设置颜色和背景属性 边距与填充属性 边框属性 3.1 CSS概述 CSS基本概念 的基本概念层叠样式表,是用于...
第三章 CSS技术.ppt
3.2.1 CSS基本格式 3.3 CSS基本属性 ? 3.3.1 CSS背景属性 ? 3.3.2 CSS文本属性 ? 3.3.3 CSS字体属性 ? 3.3.4 CSS边界属性 ? 3.3.5 CSS...
web程序设计第三章_图文.ppt
3.2.1 CSS基本格式 3.3 CSS基本属性 ? 3.3.1 CSS背景属性 ? 3.3.2 CSS文本属性 ? 3.3.3 CSS字体属性 ? 3.3.4 CSS边界属性 ? 3.3.5 CSS...
第3讲Web程序设计基础-DIV+CSS-8-9_图文.ppt
每一条样式规则都由3部分构成: 选择符(selector)、属性(properties)和属性的取值 (value),基本格式如下: 任务8:使用CSS层叠样式表 selector{property:value} ?...
《HTML5+CSS3网站设计基础教程》_教学大纲.doc
《HTML5+CSS3网站设计基础教程》_教学大纲_互联网_IT/计算机_专业资料。html...设置背景图像的大小 设置背景的显示区域 设置背景图像的裁剪区域 设置多重背景...
CSS背景的设置方法cssbackground.txt
CSS背景基础知识 CSS 背景这里指通过CSS对对象设置背景属性,如通过CSS设置背景...颜色CSS图片背景 - TOP 这里说的是以图片作为背景图片 - CSS 背景图片...
CSS 背景.doc
css 背景色 3. css 背景图片 4. 背景居中 5. 复合背景样式简写 6. 背景 background 总结 一、Css background 背景语法 CSS 背景基础知识 - TOP CSS 背景...
css3语法教程讲义_图文.ppt
背景图像? 不同格式文件图标 怎么添加?? 什么是...现在所使用的 CSS基本是在1998年推出的CSS2的基础...-mozChrome和Safari -webkitOpera -o- CSS3 的一些...
CSS样式表控制背景图片大小.doc
CSS样式表控制背景图片大小_电脑基础知识_IT/计算机_专业资料。CSS 样式表控制...(3)、背景图片的大小控制: 不过问题是,倘若图片过大了,又怎么办呢?对于一个...
CSS+div期中试题(附答案).doc
Html,CSS基础,css设置文字与背景 16 级《CSS+DIV 网页布局》第一次月考试题(...(1)答:1、将格式和结构分离 2、控制页面布局 3、制作体积更小且下载更快的...
3 CSS样式表_图文.ppt
第三章 CSS样式表 回顾与作业点评 frameset框架的基本语法? 如何设置target属性,...设置三个标签(如div)的 背景为同一图片背景 2 .考虑“购物车”、 “帮助...
网页设计基础-11CSS的应用2.pdf
CSS基础知识 1、CSS (Cascading Style Sheets) 层叠样式表:是一系列格式设置...背景图片的尺寸:background-size 背景图片平铺、拉伸! 15 3. CSS样式区块属性...
CSS实例01_图文.ppt
背景图像 3CSS: 首行缩进 4、 CSS: 边框制作 5、 CSS: 改变链接格式,...1 基本链接样式 图2 新建样式表 CSS:改变链接格式,制作多彩链接 (3) 弹出...
更多相关标签: