码云 CSS3 background-origin属性
AI 概述
标签定义及使用说明语法浏览器支持实例相关文章
标签定义及使用说明
background-Origin属性指定background-position属性应该是相对位置。
注意如果背景图像background-attachment是”fixed 固定”，这个属性没有任何效果。
默认值:
padding-box
继承:
no
版本:
CSS3
JavaScript 语...
目录
标签定义及使用说明
background-Origin属性指定background-position属性应该是相对位置。
注意如果背景图像background-attachment是”fixed 固定”，这个属性没有任何效果。
| 默认值: | padding-box |
|---|---|
| 继承: | no |
| 版本: | CSS3 |
| JavaScript 语法: | object object.style.backgroundOrigin=”content-box” |
语法
background-origin: padding-box|border-box|content-box;
| 值 | 描述 |
|---|---|
| padding-box | 背景图像填充框的相对位置 |
| border-box | 背景图像边界框的相对位置 |
| content-box | 背景图像的相对位置的内容框 |
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
| 属性 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| background-origin | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
实例
内容框相对定位的背景图片：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>码云笔记(mybj123.com)</title>
<style>
div
{
border:1px solid black;
padding:35px;
background-image:url('https://mybj123.com/wp-content/uploads/2021/06/1622611081-d1b145842e9b731.gif');
background-repeat:no-repeat;
background-position:left;
}
#div1
{
background-origin:border-box;
}
#div2
{
background-origin:content-box;
}
</style>
</head>
<body>
<p>背景图像边界框的相对位置：</p>
<div id="div1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
<p>背景图像的相对位置的内容框：</p>
<div id="div2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</body>
</html>
效果如下：
相关文章
CSS3 教程: CSS3 背景
以上关于CSS3 background-origin属性的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。
微信
支付宝声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » CSS3 background-origin属性
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » CSS3 background-origin属性
