为什么背景原型和背景剪辑适合我？

Question

我已经检查了stackoverflow，但它还没有完全解决我的问题。

根据我的理解背景 - 剪辑指示要剪切图像的位置或其可查看的部分，例如，如果将background-clip设置为content-box，则图像可能会延伸超出内容区域但是只有内容区域可见，就好像它是一个进入背景图像的窗口。背景原点并不决定图像的切割位置，而是位置的位置，

所以如果我将background-origin设置为padding-box，则background-image从padding开始，而不是在border下面。换句话说，background-clip控制框架模型的哪个部分可以查看背景图像，而background-origin控制图像开始的框模型的哪个部分。正确的吗？

当我将背景剪辑设置为边框时，然而图像不会像我理解的那样在边框处被剪裁，左边和右边会像预期的那样去边框的边缘但是顶部和底部像填充框一样夹在内边缘上。如果我将background-origin设置为padding-box，则顶部，底部和左侧和右侧的剪辑方式会有所不同。

此外，如果我将background-origin设置为内容框，则会导致向左和向右延伸经过填充，据我所知，这表明图像应该开始并保留在内容区域中。我错误地理解了这一点还是我做错了什么？我很难看到我做错了什么，因为这看起来很直接，出于同样的原因，我看不出我可能会错过理解。

https://jsfiddle.net/eeqso497/6/

  div{
            background-image: url("https://tse3.mm.bing.net     /th?id=OIP.IspmxU5Ezg8E94QsVE04vgEsDx&pid=15.1&P=0&w=199&h=161");
            background-repeat: no-repeat;
            background-size: cover;
            background-position: 30%;
            border: 10px dashed red;
            width: 150px;
            height: 150px;
            padding: 50px;
            background-clip: border-box;
            background-origin: content-box;
 }

Answer 1

我不完全确定你问的是什么，但假设这是你想要的效果：

部分问题是你在div周围有50px的填充（背景图像保留在div本身上）。然后，您需要将background-clip设置为content-box。将其设置为border-box会导致：

只需将您的CSS更改为：

＆＃13;

＆＃13;

div {
  background-image: url("https://tse3.mm.bing.net/th?id=OIP.IspmxU5Ezg8E94QsVE04vgEsDx&pid=15.1&P=0&w=199&h=161");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 30%;
  border: 10px dashed red;
  width: 150px;
  height: 150px;
  background-clip: content-box;
}

＆＃13;

<div>
</div>

＆＃13;

＆＃13;

＆＃13;

CodePen

编辑：由于OP只想了解background-clip和background-origin的工作原理;
https://developer.mozilla.org/en/docs/Web/CSS/background-origin
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip