 |
位置：电子教程 > CSS3教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
|
位置：电子教程 > CSS3教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
| 当前阅读教程：CSS3教程 > background-origin 属性 | |||||||||||||||||
| 阅读(22555525) 收藏 赞(5685) 分享 | |||||||||||||||||
| 上一篇： background-clip 属性 | 下一篇： background-size 属性 | ||||||||||||||||
浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。
标签定义及使用说明background-Origin属性指定background-position属性应该是相对位置。 注意如果背景图像background-attachment是"固定"，这个属性没有任何效果。
语法background-origin: padding-box|border-box|content-box; 值说明
实例代码<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>background-origin 属性</title>
<!--定义内部样式-->
<style>
/*通用样式*/
div{
border:1px solid black;/*边框*/
padding:50px;/*内间距*/
background-image:url('tx01.jpg');/*背景图片：长宽都是50px*/
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">
padding-box 背景图像填充框的相对位置；border-box 背景图像边界框的相对位置；content-box 背景图像的相对位置的内容框。
</div>
<p>背景图像的相对位置的内容框：</p>
<div id="div2">
padding-box 背景图像填充框的相对位置；border-box 背景图像边界框的相对位置；content-box 背景图像的相对位置的内容框。
</div>
</body>
</html>效果图
|
|||||||||||||||||
| 上一篇： background-clip 属性 | 下一篇： background-size 属性 | ||||||||||||||||
