关于背景图片设置的相关详解

佚名 6年前 (2019-05-10) 随笔 1735人围观抢沙发百度已收录

求背景图片左边到box盒子左边框外测的距离

通过这个问题呢，我们来解释一下，首先初始化代码是这样的

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  .box{
    width: 100px;
    height: 200px;
    background-color: pink;
    padding: 100px;
    border: 80px solid blue;
    background-image: url("./csdn-zx.png");
    background-repeat: no-repeat;
    background-size: 70%;
  }
</style>
<body>
  <div class="box"></div>
</body>
</html>

结果中可以看到，我们背景图片的起始位置是在padding-box下的（也就是说在padding的左上角），那么我想让这个背景图片从content-box开始怎么办呢

添加一个样式属性background-origin，他的值分别有content-box，border-box，padding-box（默认），我们将她设置为content-box

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  .box{
    width: 100px;
    height: 200px;
    background-color: pink;
    padding: 100px;
    border: 80px solid blue;
    background-image: url("./csdn-zx.png");
    background-repeat: no-repeat;
    background-size: 70%;
    background-origin: content-box;
  }
</style>
<body>
  <div class="box"></div>
</body>
</html>

如果设置为border-box,可以看到有部分不见了

回到问题本身，当我设置background-position: -50px 0px; 这时候计算出这个距离是多少

在这个属性之前我们可以计算出距离是border+padding的距离就是180px,向左边移动50排px就变成了130px，这就是最终的距离

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  .box{
    width: 100px;
    height: 200px;
    background-color: pink;
    padding: 100px;
    border: 80px solid blue;
    background-image: url("./csdn-zx.png");
    background-repeat: no-repeat;
    background-size: 70%;
    background-origin: content-box;
    background-position: -50px 0;
  }
</style>
<body>
  <div class="box"></div>
</body>
</html>