代码之家 › 专栏 › 技术社区 › Markeee

背景来源:填充框不工作?

css html

Markeee · 技术社区 · 6 年前

我有一个 div 具有 padding 四面八方。在 div 我有一个背景图像。我希望背景图像尊重 衬垫 (通过使用 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

1 回复 | 直到 6 年前

Hidden Hobbes 6 年前

为了得到结果,你需要改变 background-origin: padding-box; 到 background-origin: content-box; .

这是因为背景的位置 相对的 当你使用填充框时 背景来源:填充框; ,为了尊重填充,需要将其相对于内容框放置。

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;
}

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

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前