CSS background-origin

原创已于 2022-03-17 20:58:01 修改 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #html

于 2022-03-13 21:30:03 首次发布

css 专栏收录该内容

51 篇文章

订阅专栏

本文解析了CSS background-origin属性，介绍了border-box、padding-box和content-box三种定位方式，并展示了在不同场景下的背景图片效果。重点讲解了fixed属性下background-origin的失效情况。

`background-origin`

这个属性用来指定背景图片原点位置.

语法

关键字
- border-box: 背景图片相对于 border-box 定位
- padding-box: 默认值, 背景图片相对于 padding-box 定位
- content-box: 背景图片相对于 content-box 定位

看代码

<div class="box box9">你好<br>世界</div>
<div class="box box10">你好<br>世界</div>
<div class="box box11">你好<br>世界</div>

.box {
  border: 15px dashed #111;
  padding: 1rem;
  background-position: left top;
  font-size: 2em;
  text-align: center;
}
.box9 {
  background-origin: border-box;
}
.box10 {
  background-origin: padding-box;
}
.box11 {
  background-origin: content-box;
}

在下面三幅图中, 蓝色 部分为 content-box, 蓝色和绿色 部分为 padding-box, 蓝色和绿色和橘色 部分为 border-box

如果 background-attach 属性值为 fixed, 那么 background-origin 将不生效

<div class="box box12">你好<br>世界</div>
<div class="box box9">你好<br>世界</div>
<div class="box box10">你好<br>世界</div>
<div class="box box11">你好<br>世界</div>
<div style="height: 2000px; width: 100px;"></div>

.box {
  border: 1px solid #111;
  width: 150px;
  height: 200px;
  background-image: url(../../float/star.png);
  background-repeat: no-repeat;
  border: 15px dashed #111;
  padding: 1rem;
  background-position: left top;
  font-size: 2em;
  text-align: center;
}
.box9 {
  background-origin: border-box;
}
.box10 {
  background-origin: padding-box;
}
.box11 {
  background-origin: content-box;
}
.box12 {
  background-origin: content-box;
  background-attachment: fixed;
}