关闭

css3的background-origin

标签: css3background-originpadding-boxcontent-boxborder-box
442人阅读 评论(0) 收藏 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
	div{
		width:100px;
		height:100px;
		padding:20px;
		background:url(2013-04-20_163737.jpg) no-repeat;
		background-size:100%;
		border:10px dotted #00F;
	}
	.p-box{	background-origin:padding-box;}
	.c-box{	background-origin: content-box;}
	.b-box{ background-origin:border-box;}
</style>
<title>无标题文档</title>
</head>

<body>
<p>这个是padding-box的想过</p>
<div class="p-box">
</div>
<br />
<p>	这个是content-box的想过</p>
<div class="c-box">
</div>
<br />
	<p>这个是border-box的想过</p>
<div class="b-box">
</div>
</body>
</html>


描述 测试
padding-box 背景图像相对于内边距框来定位。 测试
border-box 背景图像相对于边框盒来定位。 测试
content-box 背景图像相对于内容框来定位。 测试

效果图:

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:182667次
    • 积分:3291
    • 等级:
    • 排名:第10787名
    • 原创:141篇
    • 转载:51篇
    • 译文:1篇
    • 评论:21条
    文章分类
    最新评论