CSS - background-origin 属性



CSS background-origin 属性用于设置背景的起始位置,可以是从边框的起始位置、边框内或填充内。

语法

background-origin: padding-box | border-box | content-box | initial | inherit;

属性值

描述
padding-box 背景图像从填充边缘的左上角开始。这是默认值。
border-box 背景图像从边框的左上角开始。
content-box 背景图像从内容的左上角开始。
initial 将属性设置为其初始值。
inherit 从父元素继承属性。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS 背景起始位置示例

下面描述了一些使用不同值的background-origin 属性示例。

填充边缘的左上角

要使背景图像从填充边缘的左上角开始,我们使用 padding-box 值。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> div { border: 10px rgb(13, 7, 190); border-style: dashed; margin: 5px; padding: 1cm; font: 700 1em sans-serif; color: aliceblue; display: inline-block; background-image: url('/css/images/yellow-flower.jpg'); height: 200px; width: 200px; } .padding-box { background-origin: padding-box; } </style> </head> <body> <h2>CSS Background-origin Property</h2> <div class="padding-box">background origin padding-box</div> </body> </html>

边框的左上角

要使背景图像从边框的左上角开始,我们使用 border-box 值。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> div { border: 10px rgb(13, 7, 190); border-style: dashed; margin: 5px; padding: 1cm; font: 700 1em sans-serif; color: aliceblue; display: inline-block; background-image: url('/css/images/yellow-flower.jpg'); height: 200px; width: 200px; } .border-box { background-origin: border-box; } </style> </head> <body> <h2>CSS Background-origin Property</h2> <div class="border-box">background origin border-box</div> </body> </html>

内容的左上角

要使背景图像从内容的左上角开始,我们使用 content-box 值。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> div { border: 10px rgb(13, 7, 190); border-style: dashed; margin: 5px; padding: 1cm; font: 700 1em sans-serif; color: aliceblue; display: inline-block; background-image: url('/css/images/yellow-flower.jpg'); height: 200px; width: 200px; } .content-box { background-origin: content-box; } </style> </head> <body> <h2>CSS Background-origin Property</h2> <div class="content-box">background origin content-box</div> </body> </html>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
background-origin 4.0 9.0 4.0 3.0 10.5
css_properties_reference.htm
广告