background 和 img_浅谈利用background-position和calc()实现background-image偏移

从一个简单的例子入手

<

css样式如下：

.child{
  width:500px;
  height:500px;
  background-color: rgb(201, 245, 145); //为了好区别，把background调灰
  background-repeat: no-repeat;
  background-size: 20% 20%;
  background-image: url("../../assets/img/jjy.jpeg");
}
.child-extra{
  background-position: right 20px bottom 20px;
}

这是一个比较常规的background-image设置，现在我有了新需求，由于图片默认是从left top开始渲染的，现在我要求它渲染的顺序是right bottom

于是我们加了一个css类child-extra，于是效果如下：

现在我们从底部开始渲染，并且设置了距离bottom 和 right 各是20px的距离

现在加大难度，现在我在div上加上20px的padding

.child-extra{
  padding:20px;
  background-position: right 20px bottom 20px;
}

这时候我们会发现，图片距离bottom和right的距离是没有变化的。

要理解这个特点，我们需要结合标准盒模型来解析这个问题。

一个标准盒模型div = margin+border+padding+content，background-image默认是从padding-content开始渲染的。

幸运的是，css3引入background-orgin，通过改变background-origin属性，是可以改变background-image的默认渲染位置的。

2.函数calc()

当然，我们也可以不改变background-position的渲染位置，而是采用它默认的从left和top的位置开始渲染

实现同等的偏移，我们完全可以使用calc()函数

.child-extra{
   background-position:left calc(100% - 20px) top calc(100% - 20px);
   //等价于 background-position:calc(100% - 20px)  calc(100% - 20px);
}