Question

我的所有方面都有div padding。在div里面我有一张背景图片。我希望背景图片尊重padding（使用background-origin）。为什么这不起作用？

我希望背景图像能够被填充所覆盖/插入（这样填充几乎就像图像周围的框架一样）。

.hero_image {
  min-height: calc(100vh - 72px);
  background-color: rgb(0, 97, 111);
  box-sizing: border-box;
  padding: 72px;
  background-origin: padding-box;
  background-image: url("https://s7.postimg.cc/6vtowr3u3/salters_hill_old_logo.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

<div class="hero_image"></div>

JS Fiddle

Answer 1

要获得结果，您需要将background-origin: padding-box;更改为background-origin: content-box;。

这是因为当您使用background-origin: padding-box;时，背景将相对定位到填充框，因为您希望尊重相对于内容框放置它所需的填充。

＆＃13;

html, body {
  padding: 0;
}
.hero_image {
  min-height: calc(100vh - 72px);
  background-color: rgb(0, 97, 111);
  box-sizing: border-box;
  padding: 72px;
  background-origin: content-box;
  background-image: url("https://s7.postimg.cc/6vtowr3u3/salters_hill_old_logo.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

＆＃13;

<div class="hero_image"></div>

＆＃13;

background-origin：padding-box不工作？

1 个答案: