DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费积分!
background-origin
属性定义了背景绘制的位置:整个元素上、边框内或填充内。
共有四个值:border-box
、padding-box
、content-box
和 inherit
。这是一个演示
background-origin
类似于 background-clip
,但它会调整背景大小,而不是裁剪它。
上面的示例还应用了background-size: cover
和 background-repeat: no-repeat
。如果不是这种情况,图像将在边框或填充下方重复。
浏览器支持
IE | Edge | Chrome | Firefox | Safari | Opera |
---|---|---|---|---|---|
9+ | 全部 | 全部 | 4+ | 全部 | 11.5+ |
iOS Safari | Chrome Android | Firefox Android | Android 浏览器 | Opera Mobile |
---|---|---|---|---|
全部 | 全部 | 全部 | 4.1+ | 全部 |
更多信息
相关属性
背景
.element { background: url(texture.svg) top center / 200px 200px no-repeat fixed #f8a100; }
background-attachment
.hero { background-attachment: fixed; }
background-blend-mode
.element { background-blend-mode: screen; }
background-clip
.element { background-clip: padding-box; }
background-color
element{ background-color: #ff7a18; }
背景图片 (background-image)
.element { background: url(texture.svg); }
背景位置 (background-position)
.element { background-position: 100px 5px; }
背景重复 (background-repeat)
.element { background-repeat: repeat-x; }
背景尺寸 (background-size)
.element { background-size: 300px 100px; }
哇!这很棒
background-origin 的默认值为 padding-box。