Web前端学习—基础篇(16)_如何给设置背景图

前端学习——基础篇

四、CSS学习

4.6、背景

作用在内容、内填充、边框

4.6.1、背景颜色 background-color属性

默认背景颜色透明色transparent
属性值可以是：关键词、十六进制色值、rgb颜色模式、rgba颜色模式

4.6.2、背景图片 background-image属性

语法：

background-image: url(图片地址);
background-image: none; 没有背景图片，默认值

特性：

• 背景图片不占位
• 默认在水平方向和垂直方向重复、平铺，铺满整个盒子
• 背景图是网页的装饰，起美化作用
• 写在样式中(不会被搜索引擎搜索到)

4.6.3、背景图是否重复 background-repeat属性

• background-repeat: repeat; 默认值 背景图在水平方向和垂直方向重复
• background-repeat: no-repeat; 不重复
• background-repeat: repeat-x; 沿着水平方向重复
• background-repeat: repeat-y; 沿着垂直方向重复

4.6.4、背景图定位属性 background-position属性

语法：

background-position: x y;

属性值：

• 关键词：left|center|right top|center|bottom 如果有1个关键词，另一个关键词默认为center
• 数值：px|% 如果是两个值，第一个表示水平方向，第二个表示垂直方向;如果只有一个值，表示水平方向，垂直方向居中（50%）

4.6.5、背景简写属性 background属性

background: background-color background-image  background-repeat background-position;
/*引用一张背景图*/
background: #fff url(images/3_04.jpg) 27px 73px no-repeat;
/*引用多张背景图直接用逗号隔开即可*/
background: url(images/2_07.jpg) 15px 99px no-repeat , url(images/2_08.jpg) 373px 99px no-repeat,url(images/2_09.jpg)  731px 99px no-repeat;