<!DOCTYPE html>
<html>
<head>
<style>
#example1 { border: 10px solid black;
padding: 35px;
background: url(/i/photo/flower.gif);
background-repeat: no-repeat;
}
#example2 { border: 10px solid black;
padding: 35px;
background: url(/i/photo/flower.gif);
background-repeat: no-repeat;
background-origin: border-box;
}
#example3 { border: 10px solid black;
padding: 35px;
background: url(/i/photo/flower.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
</style>
</head>
<body>
<h1>background-origin 属性</h1>
<p>未设置 background-origin (padding-box 为默认):</p>
<div id="example1">
<h2>Welcome to Shanghai</h2>
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
<p>The city is located on the southern estuary of the Yangtze, with the Huangpu River flowing through it.</p>
</div>
<p>background-origin: border-box:</p>
<div id="example2">
<h2>Welcome to Shanghai</h2>
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
<p>The city is located on the southern estuary of the Yangtze, with the Huangpu River flowing through it.</p>
</div>
<p>background-origin: content-box:</p>
<div id="example3">
<h2>Welcome to Shanghai</h2>
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
<p>The city is located on the southern estuary of the Yangtze, with the Huangpu River flowing through it.</p>
</div>
</body>
</html>