背景相关css属性你还模棱两可吗？进来看看有源码有实例——属性整理

背景相关

使用的原始图片：
在这里插入图片描述

起始点background-origin（css3）

  
  <div class = 'backgrounddemo originpadding'></div>
  <div class = 'backgrounddemo originborder'></div>
  <div class = 'backgrounddemo origincontent'></div>
  
<style>
.backgrounddemo{
  display: inline-block;
  margin:20px 20px;
  width:100px;
  height:100px;
  padding: 50px;
  border: 50px solid rgba(4, 7, 20, 0.5);
  background-image: url('../assets/bgc.jpg');
}
.originpadding{
  background-origin: padding-box;
}
.originborder{
  background-origin:border-box;
}
.origincontent{
  background-origin:content-box;
}

</style>

在这里插入图片描述
3个可选值，分别是padding-box、border-box和content-box。结果分别如上图，可以发现图片的起始点发生了改变。
padding-box：起始点在padding开始的左上角，也就是和border接轨的左上角的点。
border-box：起始点在border的左上角，也就是黑色边框的左上角。
content-box：起始点在padding与content相交的左上角，
background-origin属性针对的是背景颜色和背景图像的起始位置。

绘制区（裁剪区）background-clip

 <div class = 'backgrounddemo clippadding'></div>
  <div class = 'backgrounddemo clipborder'></div>
  <div class = 'backgrounddemo clipcontent'></div>


<style>
.backgrounddemo{
  display: inline-block;
  margin:20px 20px;
  width:100px;
  height:100px;
  padding: 50px;
  border: 50px solid rgba(4, 7, 20, 0.5);
  background-image: url('../assets/bgc.jpg');
  background-repeat: no-repeat;
}

.clippadding{
  background-clip:padding-box;
}
.clipborder{
  background-clip: border-box;
}
.clipcontent{
  background-clip: content-box;
}

</style>

在这里插入图片描述
background-clip属性针对的是背景颜色和背景图像的绘制区域。三个属性值与上文origin一致，基本类推。值得注意的是，clip属性的border-box值与我们预期的可能不太一样，他不包含左上，但是包含右下

尺寸 background-size（css3）

  <div class = 'backgrounddemo sizeauto'></div>
  <div class = 'backgrounddemo sizecover'></div>
  <div class = 'backgrounddemo sizecontain'></div>
  <div class = 'backgrounddemo sizepx'></div>
  <div class = 'backgrounddemo sizepercent'></div>


<style>
.backgrounddemo{
  display: inline-block;
  margin:20px 20px;
  width:100px;
  height:100px;
  padding: 50px;
  border: 50px solid rgba(4, 7, 20, 0.5);
  background-image: url('../assets/bgc.jpg');
  background-repeat: no-repeat;
}
.sizeauto{
  background-size: auto;
}
.sizecover{
  background-size: cover;
}
.sizecontain{
  background-size: contain;
}
.sizepx{
  background-size: 100px 100px;
}
.sizepercent{
  background-size: 80% 80%;
}

</style>

在这里插入图片描述
background-size五种值分别是：

auto

自动，即背景图不做处理，有多大展示多大能展示完全就展示完全，不能展示完全就不展示完全，不会进行缩放。大了溢出就展示不了，小了填不满就会出现空白。

cover

会按比例进行缩放，但是缩放结果的标准是xy轴有一边完全占满，另一方又不能留空白。意思是在放大或者缩小时，保证div块被填满并且最小尺度的缩放背景图片。不会留白但是可能会有部分溢出。

contain

会按比例进行缩放，但是只会沾满一边，不论是缩小还是放大，只要一边已经占满，不考虑另一边是否沾满或者溢出，不再调整。可能出现空白或者部分溢出。

尺寸

两个像素，设置宽高，将原图完整的压缩或者放大填进去。比例可能改变，图便可能变形。与百分比类似。

百分比

设置宽高的百分比，可能会出现比例变化，变形。但一定全部占满所设置的尺寸。

背景图附着background-attachment

<h5>attachment</h5>
  <div class = 'backgrounddemo attachmentscroll'>
    kjsagfkjsd fkajdgf ajkhdgf ajhsdgf ajhsdgfa djhfgkajhgdfk ahgf ajhsdgfjhdgfjagdfjhagdfjhasgfjhas jahdgfjkahdgfjakjahgdfjhadgf ahjsdgfhjadgfjkahs jkasdgfkjhasgdf jdgfjkhasgfhjsagfdjhasgdfjhagdjfhasgfkjhasdgfjhasdgfjhasgfjhagdjhasgfjhgfkjhsagfhjadsb,sjdhgf jkadgfjkhasgfjkhagfkjas dfjhadgfjhasgf asjhdfgajkshfbjshfghjsagfkjhads
  </div>
  <div class = 'backgrounddemo attachmentlocal'>
     kjsagfkjsd fkajdgf ajkhdgf ajhsdgf ajhsdgfa djhfgkajhgdfk ahgf ajhsdgfjhdgfjagdfjhagdfjhasgfjhas jahdgfjkahdgfjakjahgdfjhadgf ahjsdgfhjadgfjkahs jkasdgfkjhasgdf jdgfjkhasgfhjsagfdjhasgdfjhagdjfhasgfkjhasdgfjhasdgfjhasgfjhagdjhasgfjhgfkjhsagfhjadsb,sjdhgf jkadgfjkhasgfjkhagfkjas dfjhadgfjhasgf asjhdfgajkshfbjshfghjsagfkjhads

  </div>
  <div class = 'backgrounddemo attachmentfixed'>
    kjsagfkjsd fkajdgf ajkhdgf ajhsdgf ajhsdgfa djhfgkajhgdfk ahgf ajhsdgfjhdgfjagdfjhagdfjhasgfjhas jahdgfjkahdgfjakjahgdfjhadgf ahjsdgfhjadgfjkahs jkasdgfkjhasgdf jdgfjkhasgfhjsagfdjhasgdfjhagdjfhasgfkjhasdgfjhasdgfjhasgfjhagdjhasgfjhgfkjhsagfhjadsb,sjdhgf jkadgfjkhasgfjkhagfkjas dfjhadgfjhasgf asjhdfgajkshfbjshfghjsagfkjhads
  </div>


<style>
.backgrounddemo{
  display: inline-block;
  margin:20px 20px;
  width:100px;
  height:100px;
  padding: 50px;
  border: 50px solid rgba(4, 7, 20, 0.5);
  background-image: url('../assets/bgc.jpg');
  background-repeat: no-repeat;
  overflow: auto;
}
.attachmentscroll{
  background-attachment: scroll;
}
.attachmentfixed{
  background-attachment: fixed;
}
.attachmentlocal{
  background-attachment: local;
}

</style>

在这里插入图片描述

scroll

会跟随元素，就是元素的背景图，元素内部撑开有滚动条不会滚动

local

会跟随元素，就是元素的背景图，元素内部撑开有滚动条会滚动。会随着文字滚动背景图跟着滚动。

fixed

以视口左上角为单位开始绘制，与元素无关，如果该元素刚好落在有背景的区域就展示，没有就不展示。上图如果把该元素的位置移到左上角就会看到背景。如果背景采用平铺的方式，也会看到，元素随页面滚动条滚动到不同的位置，背景图不一样，因为背景图位置不会变，但是元素在背景图上所处的位置变了。自然看到的不一样。

背景图定位background-position

方位关键字 top、right、bottom、left和center

这些值通常设置的时候会成对出现，一个对应水平方向，另一个对应垂直方向。关键字最多只能设置两个，并且还有一点比较特殊，就是可以按任何顺序排列。

div{
background-position:top left;
}
//等同于
div{
background-position:left top;
}

长度

长度值会让背景图像从起始点处开始偏移，默认的起始点在上面曾提到过，就是元素背景区的左上角，而偏移点是背景图像的左上角。background-position属性可同时定义两个长度值，第一个为水平方向的偏移，第二个为垂直方向的偏移。如果将元素背景区看做一个特殊的坐标轴，那么它的左上角相当于原点，两个方向相当于X轴（横轴）和Y轴（纵轴）.如果为一个div元素设置两个偏移值：10px和20px，那么背景图像的左上角将在横坐标为10px，纵坐标为20px的坐标点上。

百分数

百分数与长度一样，也可以定义两个值，两个值表示的方向也相同。但百分数是一个相对值，需要参照物，它参照的是背景区的宽高减去原图像的宽高而得到的值。百分数会同时应用于背景区和原图像，如果为一个div元素设置两个偏移值：60%和20%（代码如下所示），那么就会像图4-70那样，需要把两个坐标点对齐，第一个坐标点在原图像中，第二个坐标点在背景区中，两个坐标点的横坐标都为60%，纵坐标都为20%。

简写形式

CSS提供了background的简写属性，它可以设置上面的任何一个属性，在设置多个属性的时候可以随意排列，但有一个限制，就是background-position的两个值必须同时出现，并且当background-position的两个值不是关键字的时候，也即是说是像素值或者百分数时，必须水平偏移的值在前，垂直偏移的值在后。

下边真的可以不看 -----

想学习一些前端的书籍吗，我都帮你整理好啦！评论打出你想读的书，给你最全的笔记干货

 超级全的前端知识，面试必备、系统复习必备哟哟哟

有想法评论提出哈，欢迎交流，小编也是渣渣一枚呢～一起进步呗

这次真的可以不看 -----

点个收藏呗，要不赞一个呗，小编手都敲累了，但还是持续加更呢～