我找不到为什么 background-origin 属性不起作用？

Question

我用background-origin:content-box。它应该只覆盖内容区域，但它也覆盖右填充+边框区域。发生什么事了？

来自我的 codepen at https://codepen.io/nur49/pen/jOrpmBy ...

#backgr {
  background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSExg6qzYza-IFtjglPRkSw5h0el5_Bii1KaQ&usqp=CAU');
  background-repeat: no-repeat;
  background-size:cover;
  border:10px dashed yellow;
  padding:10px;
  background-origin:content-box ;
}

<!DOCTYPE HTML>
<html>
  <head>
    <title></title>
    <link rel="stylesheet" href="style2.css">
  </head>
  <body>
    <div id="backgr">
    <p>
   Ut eu sem integer vitae. Donec ac odio tempor orci dapibus ultrices. Molestie a iaculis at erat pellentesque. Metus aliquam eleifend mi in nulla posuere sollicitudin. Turpis massa tincidunt dui ut ornare. Elit at imperdiet dui accumsan sit. Lacus viverra vitae congue eu consequat. Blandit aliquam etiam erat velit scelerisque in. Quam vulputate dignissim suspendisse in est ante in nibh.Dolor sit amet consectetur adipiscing. Integer feugiat scelerisque varius morbi enim nunc faucibus a pellentesque. Lacinia quis vel eros donec ac. Convallis tellus id interdum velit laoreet id donec. Vel pretium lectus quam id leo in vitae. Cursus sit amet dictum sit amet. Eget mi proin sed libero enim sed faucibus. Ut eu sem integer vitae. D. Integer feugiat scelerisque varius morbi enim nunc faucibus a pellentesque. Lacinia quis vel eros donec ac. Convallis tellus id interdum velit laoreet id donec. Vel pretium lectus quam id leo in vitae. Cursus sit amet dictum sit amet. Eget mi proin sed libero enim sed faucibus. Ut eu sem integer vitae. Donec ac odio tempor orci dapibus ultrices. Molestie a iaculis at erat pellentesque. Metus aliquam eleifend mi in nulla posuere sollicitudi
    </p>
    </div>
  </body>
</html>

Answer 1

您需要使用 background-clip 或修改 background-size 才能不溢出 :

#backgr,
.backgr {
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSExg6qzYza-IFtjglPRkSw5h0el5_Bii1KaQ&usqp=CAU');
  background-repeat: no-repeat;
  background-size: cover;
  border: 10px dashed yellow;
  padding: 10px;
}
/* two option to fix this */
#backgr {
  background-clip: content-box;
}

.backgr {
  background-size: 100% 100%;
  background-origin: content-box;
}

<div id="backgr">
  <p>
    Ut eu sem integer vitae. Donec ac odio tempor orci dapibus ultrices. Molestie a iaculis at erat pellentesque. Metus aliquam eleifend mi in nulla posuere sollicitudin. Turpis massa tincidunt dui ut ornare. Elit at imperdiet dui accumsan sit. Lacus viverra
    vitae congue eu consequat. Blandit aliquam etiam erat velit scelerisque in. Quam vulputate dignissim suspendisse in est ante in nibh.Dolor sit amet consectetur adipiscing. Integer feugiat scelerisque varius morbi enim nunc faucibus a pellentesque.
    Lacinia quis vel eros donec ac. Convallis tellus id interdum velit laoreet id donec. Vel pretium lectus quam id leo in vitae. Cursus sit amet dictum sit amet. Eget mi proin sed libero enim sed faucibus. Ut eu sem integer vitae. D. Integer feugiat
    scelerisque varius morbi enim nunc faucibus a pellentesque. Lacinia quis vel eros donec ac. Convallis tellus id interdum velit laoreet id donec. Vel pretium lectus quam id leo in vitae. Cursus sit amet dictum sit amet. Eget mi proin sed libero enim
    sed faucibus. Ut eu sem integer vitae. Donec ac odio tempor orci dapibus ultrices. Molestie a iaculis at erat pellentesque. Metus aliquam eleifend mi in nulla posuere sollicitudi
  </p>
</div>
<hr>
<div class="backgr">
  <p>
    Ut eu sem integer vitae. Donec ac odio tempor orci dapibus ultrices. Molestie a iaculis at erat pellentesque. Metus aliquam eleifend mi in nulla posuere sollicitudin. Turpis massa tincidunt dui ut ornare. Elit at imperdiet dui accumsan sit. Lacus viverra
    vitae congue eu consequat. Blandit aliquam etiam erat velit scelerisque in. Quam vulputate dignissim suspendisse in est ante in nibh.Dolor sit amet consectetur adipiscing. Integer feugiat scelerisque varius morbi enim nunc faucibus a pellentesque.
    Lacinia quis vel eros donec ac. Convallis tellus id interdum velit laoreet id donec. Vel pretium lectus quam id leo in vitae. Cursus sit amet dictum sit amet. Eget mi proin sed libero enim sed faucibus. Ut eu sem integer vitae. D. Integer feugiat
    scelerisque varius morbi enim nunc faucibus a pellentesque. Lacinia quis vel eros donec ac. Convallis tellus id interdum velit laoreet id donec. Vel pretium lectus quam id leo in vitae. Cursus sit amet dictum sit amet. Eget mi proin sed libero enim
    sed faucibus. Ut eu sem integer vitae. Donec ac odio tempor orci dapibus ultrices. Molestie a iaculis at erat pellentesque. Metus aliquam eleifend mi in nulla posuere sollicitudi
  </p>
</div>

background-origin 不会剪辑或裁剪您的图像，它只会设置其原点位置。您的尝试将左上角的原点设置得很好，但不会在它溢出的地方裁剪它。

https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin

The background-origin CSS property sets the background's origin: from the border start, inside the border, or inside the padding.examples

Note that background-origin is ignored when background-attachment is fixed.

我找不到为什么 background-origin 属性 不起作用？

I can't find why background-origin property not working?

html

css

background

background-image

我找不到为什么 background-origin 属性不起作用？