CSS - background-origin 属性_CSS 菜鸟教程

CSS background-origin 属性用于设置背景的原点，可以是从边框的开头开始，边框内或填充内。

语法

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

属性值

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

CSS 背景来源示例

下面描述了使用不同值的背景源属性的一些示例。

填充边缘的左上角

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

<!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 值。

<!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 值。

<!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>

支持的浏览器

属性
background-origin	4.0	9.0	4.0	3.0	10.5

<< CSS - background-image 属性 CSS - background-position 属性 >>