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

最新推荐文章于 2021-11-03 00:24:03 发布

dbp5156

最新推荐文章于 2021-11-03 00:24:03 发布

阅读量122

点赞数

原文链接：http://www.cnblogs.com/LO-ME/p/10842212.html

版权

求背景图片左边到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%;
  }
</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>

转载于:https://www.cnblogs.com/LO-ME/p/10842212.html

dbp5156

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于背景图片设置的相关详解

求背景图片左边到box盒子左边框外测的距离通过这个问题呢，我们来解释一下，首先初始化代码是这样的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head&gt...
复制链接

扫一扫