Web前端开发技术项目教程（HTML5 CSS3 JavaScript）（微课版） 课件 6.3.2知识点1：背景样式设置.pptx

背景设置信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》

前端技术开发知识储备背景颜色设置1背景图片设置2

01背景颜色设置前端技术开发

01背景颜色设置背景颜色属性设置：background-color:表示颜色的方式说明：transparent表示透明,默认值英文单词，比如：red、green等十六进制，比如：#FF0000，#00FRGB方式，比如：rgb(255,0,0)

01背景颜色设置HTML代码网页效果body{background-color：#333;}h1{background-color：red;}

02背景图片设置前端技术开发

02背景图片设置背景图片属性设置：background-image:url(图片路径)|none说明：url指定背景图片路径。图片的格式一般以GIF、JPG和PNG格式为主。none是一个默认值，表示无背景图片。CSS3中还可以设置多个背景图片，设置多个图片时用逗号隔开。背景颜色和背景图片可以同时设置，当无法显示图片时会显示背景色。

02背景图片设置body{ background-image:url(../img/bg_2.png);}CSS代码：HTML代码：body pHTML（标准通用标记语言下的一个应用）标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做WebHypertextApplicationTechnologyWorkingGroup（Web超文本应用技术工作组-WHATWG）的组织。/p/body网页效果:给页面设置背景图片：p{background-image:url(../img/bg_1.png);}给网页元素设置背景图片：body/body

02背景图片设置设置背景图片时，图片大小与设置区域的关系情况一：背景图片区域 图片会被裁剪，只显示区域大小的部分，一般是左上角部分。裁剪重复情况二：背景图片区域 图片会出现重复。

02背景图片平铺设置背景图片平铺属性：background-repeat:repeat|repeat-x|repeat-y|no-repeat属性值描述repeat默认。背景图像将在垂直方向和水平方向重复repeat-x背景图像将在水平方向重复突repeat-y背景图像将在垂直方向重复no-repeat背景图像将仅显示一次background-repeat属性取值

02背景图片平铺设置body{background-repeat:repeat;}body{background-repeat:repeat-x;}body{background-repeat:repeat-y;}body{background-repeat:no-repeat;}

02背景图片平铺设置body{ background-image:url(../img/bg.png);}CSS代码：网页效果：切片平铺后的效果/*设置背景图片不平铺*/background-repeat:no-repeat; 不平铺将大的图片切片，可以加快网页下载速度。

02背景附件设置背景附件属性：background-attachment:scroll|fixed说明：当页面内容过长，会出现垂直滚动条，设置背景图片是否会随着页面内容下移而出屏幕。 scroll表示背景图片是随着滚动条的移动而移动，为默认值。 ?xed表示背景图片固定在页面上不动，不随着滚动条的移动而移动。

02背景图片平铺设置CSS代码：网页效果：background-attachment:fixed;/*左侧网页*/background-attachment:scroll;/*右侧网页*/

02背景图片位置设置背景图片位置属性：background-position：水平方向偏移量垂直方向偏移量说明：图片位置通过设置水平方向偏移量和垂直方向偏移量来表示。可以使用百分比|长度|关键字基准点（0，0）为区域左上角负值表示移动的方向

02背景图片位置设置常用位置表示方式：关键字百分比说明lefttop0%0%左上位置centertop50%0%靠上居中位置righttop100%0%右上位置centerleft0%50%靠左居中位置centercenter50%50%正中位置centerright100%