7.1 背景属性

背景缩写缩写可以卸载一个声明中设置所有的背景属性
背景图像支持引入多个图像
主要属性有:
background-color
background-image
background-repeat
background-position
backgournd-attchment
backgournd-size
backgournd-origin
backgournd-clip


7.2 背景颜色

background-color

  • 指定要使用的背景颜色 例如:background-color:#ffcc00
  • 可以简写为background
  • backround-color 不能继承,其默认值是trandsparent。trandsparent有透明之意。也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见。
  • transparent 指定背景颜色应该是透明的,默认值。
  • inherit 指定背景颜色,应该从父元素继承
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
.box{
width:650px;
height:32px;
background-color:orange;// 颜色
color:#fff; // 字体颜色
text-aligh:center;//字体内容水平居中
}

div{
width:200px;
height:200px;
backgournd-color:darkbule;
margin:0 auto;//上下0 左右auto 块元素水平居中
line-height:200px;//垂直居中
}
</style>

7.3 背景图片

background-image

  • url(‘图像的url路径地址’)图像的url
  • none 表示北京上没有防止任何图像,这就是默认值
  • inherit指定背景图像应该从父元素继承
  • 一个元素可以引入多张背景图片,指定要使用的一个或者多个背景图像,默认情况下background-image放置在元素的左上角,并重复垂直的水平方向。
  • backgournd image:url(‘pic.png’),url(‘pic2.png’)… …
  • backgournd image 属性不能继承

7.4 背景重复

  • 指定如何重复背景图像,默认情况下,重复background-image的垂直和水平方向
  • repeat 背景图像向垂直和水平方向垂直。这是默认
  • repeat-x 只有水平位置会重复背景图像
  • repeat-y 只有垂直位置会重复背景图像
  • no-repeat background-image不会重复
  • inherit 指定背景重复应该从父元素继承
1
2
3
4
5
6
.logo{
width:300px;
height:300px;
backgournd-image:url('../xxx/png');
backgournd-repeat:repeat x;//平铺的方式(重复)
}

7.5 背景定位

  • backgournd-position属性设置背景图像的起始位置;
  • xpos ypos 第一个值的水平位置,第二个值是垂直。左上角是0。单位可以是长度值px,关键字和百分数值
  • 关键字成对出现left right top bottom center,如果仅指定一个关键字,其他值将会“center”
  • x% y%第一个值水平位置,第二值是垂直。左上角是0%0%。
  • inherit 指定background-position属性设置应该从父元素继承
1
2
3
4
5
6
7
8
9
10
.logo{
width:400px;
height:400px;
backgournd-color:#3385ff;//背景颜色
backgournd-image:url('./xxx.png');
backgournd-repeat:no-repeat;
backgournd-position:50px 50px;//x轴的坐标(水平方向)y轴的坐标方向(垂直方向) x轴越大 越往右 x轴越大 越往下
//50% 50% > center center //中心位置

}

经常使用在雪碧图中

7.6 背景关联

backgournd-attachmen

  • 设置背景图像是否固定或者随着页面的其余部分滚动
  • scroll 背景图片随页面的其余部分滚动。这是默认
  • fixed 背景图像是固定的
  • inherit 指定background-attachment的设置应该从父元素继承
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
*{
padding:0px;
margin:0px;
}

.banner{
width:100%;
height:800px;
backgournd:url(../xxx.png) no-repeat

}

.banner01{
width:100%;
height:800px;
backgournd:url(../xxx.png) no-repeat

}

.banner02{
width:100%;
height:800px;
backgournd:url(../xxx.png) no-repeat
backgournd-attachmen:fixed;// 可以固定不动
}

7.7 设置对象的背景图像的尺寸大小

background-size

  • 用长度值指定背景图像大小。不允许负值;
  • 用百分比指定背景图像大小。不允许负值。
  • auto背景图像的真实大小
  • cover将背景图等比例缩放到完全覆盖容器,背景图像有可能超出容器;
  • contain将背景图像等比例缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内
1
2
3
4
5
6
.pic{
width:200px;
height:1600px;
background:url('../xx.png')
background-size:300px 300px; // x轴 y轴
}

7.8 设置对象的背景图像向外裁剪的区域

background-clip

  • padding-box:从padding区域(不含padding)开始想外裁剪背景;
  • border-box:从border区域(不含border)开始向外裁剪背景
  • bontent-box:从content区域开始向外裁剪背景
  • text:从前景内容的形状(比如文字)作为裁剪区域向外裁剪,如此极客实现使用背景作为填充色之类的遮罩效果。
1
2
3
4
5
6
7
.pic{
width:200px;
height:1600px;
background:url('../xx.png')
background-size:300px 300px; // x轴 y轴
backgound-clip:border-box;
}

7.9 设置背景图像的参考原点(位置)

background-orign

  • padding-box:从padding区域(含padding)开始显示背景图像
  • border-box:从border区域(含border)开始显示背景图像
  • content-box:从content区域开始显示背景图像

image.png