background-origin
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Thuộc tính CSS background-origin đặt điểm gốc của nền: từ đầu viền, bên trong viền, hoặc bên trong padding.
Lưu ý rằng background-origin bị bỏ qua khi background-attachment là fixed.
Try it
background-origin: border-box;
background-repeat: no-repeat;
background-origin: padding-box;
background-repeat: no-repeat;
background-origin: content-box;
background-repeat: no-repeat;
<section id="default-example">
<div id="example-element">This is the content of the element.</div>
</section>
#example-element {
background-image: url("/shared-assets/images/examples/leopard.jpg");
color: #d73611;
text-shadow: 2px 2px black;
padding: 20px;
border: 10px dashed #333333;
font-size: 2em;
font-weight: bold;
}
Cú pháp
/* Giá trị từ khóa */
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;
/* Giá trị toàn cục */
background-origin: inherit;
background-origin: initial;
background-origin: revert;
background-origin: revert-layer;
background-origin: unset;
Thuộc tính background-origin được chỉ định bằng một trong các giá trị từ khóa được liệt kê bên dưới.
Giá trị
border-box-
Nền được định vị tương đối so với hộp viền.
padding-box-
Nền được định vị tương đối so với hộp padding. Giá trị mặc định.
content-box-
Nền được định vị tương đối so với hộp nội dung.
Định nghĩa hình thức
| Initial value | padding-box |
|---|---|
| Applies to | all elements. It also applies to ::first-letter and ::first-line. |
| Inherited | no |
| Computed value | as specified |
| Animation type | a repeatable list |
Cú pháp hình thức
background-origin =
<visual-box>#
<visual-box> =
content-box |
padding-box |
border-box
Ví dụ
Đặt điểm gốc nền
.example {
border: 10px double;
padding: 10px;
background: url("image.jpg");
background-position: center left;
background-origin: content-box;
}
#example2 {
border: 4px solid black;
padding: 10px;
background: url("image.gif");
background-repeat: no-repeat;
background-origin: border-box;
}
div {
background-image:
url("logo.jpg"), url("main-back.png"); /* Áp dụng hai ảnh cho nền */
background-position:
top right,
0px 0px;
background-origin: content-box, padding-box;
}
Sử dụng hai gradient
Trong ví dụ này, hộp có viền chấm dày. Gradient đầu tiên sử dụng padding-box làm background-origin và do đó nền nằm bên trong viền. Gradient thứ hai sử dụng content-box nên chỉ hiển thị phía sau nội dung.
.box {
margin: 10px 0;
color: white;
background:
linear-gradient(
90deg,
rgb(131 58 180 / 100%) 0%,
rgb(253 29 29 / 60%) 60%,
rgb(252 176 69 / 100%) 100%
),
radial-gradient(circle, white 0%, black 28%);
border: 20px dashed black;
padding: 20px;
width: 400px;
background-origin: padding-box, content-box;
background-repeat: no-repeat;
}
<div class="box">Hello!</div>
Đặc tả
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # background-origin |