我们在操作盒子div的时候 一般都会用到背景图片或者背景颜色等属性
1. background-image 背景图片
//设置 div的宽高和样式
<style>
div{
width: 500px;
height: 500px;
background-image:url("../images/H5/3.jpg");
}
</style>
2. 如果只设置背景图片，盒子的宽度和高度大于图片的真实大小，图片默认是平铺的 ，这是要用到background-repeat这个属性来更改设置
<style>
div{
width: 500px;
height: 500px;
background-image:url("../images/H5/3.jpg");
/* 图片默认是 平铺的 */
background-repeat: no-repeat;
/* 设置背景颜色 */
background-color: bisque;
}
</style>
background-repeat:这个属性 还有2个值 ，repeat-x; x轴上横平铺,repeat-y; y轴上 平铺
3. 我们看到图片 在左上角显示，如果我们想更改背景图片的位置呢，这就要使用到 background-position属性
<style>
div{
width: 500px;
height: 500px;
background-image:url("../images/H5/3.jpg");
/* 图片默认是 平铺的 */
background-repeat: no-repeat;
background-color: bisque;
/* 方位名词没有顺序，谁写在前面都可以 */
background-position: center center;
}
</style>
background-position里面使用的方位名词，top,left,bottom,right, 如果方位名词 只写一个 另外一个 默认是center
当然我们也可以精确到准确的位置比如
background-position: 10px 10px;注意:第一个参数值是x抽，第二是参数值是y抽
最后
background-position属性是可以和方位名词和坐标结合写的，比如:background-position: center -20px;这就说明:水平居中 垂直方向是 向上走了20像素
4.有时我们需要固定 背景图片需要使用到 background-attachment，此属性默认是scroll,如果我们想让 背景固定的话需要更改成fixed
<style>
body{
background-image: url("../images/H5/ms.jpg");
/* 背景固定 默认是scroll 滚动 fixed是固定的*/
background-attachment: fixed;
}
我们在写background的属性的时候，可以综合简写，一般的格式是
/*
背景颜色背景图片背景平铺背景滚动背景位置*/
background: #336699 url("../images/H5/ms.jpg") no-repeat fixed center -25px;
6.前面说过背景 图片如果小于 盒子的宽高时，就会平铺，但是如果图片的真实大小大于我们盒子的宽高时，我们就需要用到 图片的缩放属性 background-size
其实
background-size属性可以精确设置宽和高，但是一般不这样，我们一般在使用这个时，设置一个参数(宽度/高度) 那么另外一个参数就会自适应
div{
width: 400px;
height: 500px;
background: #336699 url("../images/H5/l.jpg") no-repeat fixed left top;
/* 背景图 缩放 参数:宽度 和 高度 */
/* 修改一个 参数 另外一个可以自动缩放 */
background-size: 100px;
}
当然也可以设置百分比
background-size: 20%;'
div{
width: 400px;
height: 500px;
background: #336699 url("../images/H5/l.jpg") no-repeat fixed left top;
/* 使用百分比 */
background-size: 20%;
}
其中比较重要的2个属性是 cover(经常使用) 和contain
那么
cover表示什么？ 它表示: 自动缩放比例，保证图片填充背景区域，如有溢出则会隐藏; 其实就是根据盒子的宽度和高度进行缩放，直到盒子的宽度和高度都被填充完全，超出的部分隐藏
div{
width: 400px;
height: 500px;
background: #336699 url("../images/H5/l.jpg") no-repeat fixed left top;
/* cover:自动缩放比例，保证图片填充背景区域，如有溢出则会隐藏 */
/* 等比缩放，图片要填充到盒子的宽度和高度，就是图片和满足盒子的宽度和高度，超过的部分被隐藏 */
background-size: cover;
}
从上面的，结果中我们可以知道，如果使用
cover这个属性，那么图片就会根据盒子的宽度和高度，进行填充，如果宽度被填充完全的话，而高度没有被完全填充完，就会继续将图片进行缩放，直到高度被完全填充，那么超出宽度的部分就会被隐藏掉
contain属性呢？ 它是也是按比例缩放，不过这个属性是，当一个参数完全填充了，另外一个参数，就不会再继续填充，来保证图片的完整性
<style>
div{
width: 400px;
height: 500px;
background: #336699 url("../images/H5/l.jpg") no-repeat fixed left top;
/* contain：等比例缩放的时候，如果有一个参数(宽度/高度) 达到 盒子的宽度/高度 那么另外一个参数 就不会再缩放，保证图片的完整性 */
background-size: contain;
}
</style>
7. 背景半透明
这个属性比较简单
<style>
body{
/* 背景颜色 背景图片 平铺 背景固定 背景位置 */
background: #336699 url("../images/H5/king.jpg") no-repeat fixed top center;
}
div {
height: 400px;
/* 背景半透明 */
background: rgba(0, 0, 0, 0.7);
}
</style>
8 .背景透明 transparent
<style>
div{
width: 200px;
height: 200px;
display: inline-block;
margin-left: 50px;
}
div:first-child {
background: yellow;
}
div:nth-child(2){
background: transparent;
border: 1px solid #000000;
}
div:last-child{
background: purple;
}
</style>
9.多背景图片
- background属性，设置多个背景图片，之间用
逗号隔开，背景颜色，要放在后面，以免层叠覆盖掉
div{
height: 500px;
width: 700px;
background: url("./images/timg.jpeg") no-repeat top left,
url("./images/web.jpg") no-repeat bottom right pink;
background-size: 50%;
}
小例子
主要用到
background-position属性，来更改图片的位置
<style>
a {
width: 67px;
height: 34px;
background: url("../images/H5/110.png") no-repeat left top;
/* 转化为块级元素 */
display: block;
}
a:hover{
background-position: left bottom;
}
</style>
10.background-origin
background-origin背景图片根据盒模型的哪个区域来定位。
-
border-box，图片相对于边框（Border）定位，
image.png -
padding-box，图片相对于内边距框（Padding）定位
image.png content-box，图片相对于内容框（Content）定位。
padding: 20px;
background-image: url("JD/images/banner_1.jpg");
background-repeat: no-repeat;
background-origin: content-box;
11. background-clip
- background-clip背景绘制区域，也就是背景可以被绘制的区域，基于盒模型 和 background-origin一样有
border-box：边框以外被裁剪
padding-box：内边距以外被裁剪
content-box: 内容以外被裁剪
3个属性
