css3的background-origin

原创 2013年12月02日 18:35:38
<!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 背景图像相对于内容框来定位。 测试

效果图:

 

版权声明:原创文章,请标明出处~~~

css3之background-origin和background-clip的区别与联系

background-origin(CSS3新属性) 规定 background-position 属性相对于什么位置来定位 有三个属性值: border-box(忽略border,即会覆...
  • cysear
  • cysear
  • 2015年12月09日 17:22
  • 802

【CSS3】background-origin

设置元素背景图片的原始起始位置。 语法: background-origin : border-box | padding-box | content-box; 参数分别表示背景图片是从边框,还是...
  • happyhaojie
  • happyhaojie
  • 2016年02月22日 15:55
  • 136

HTML/CSS: background-clip 与 background-origin的区别

在CSS2中,背景图片定义的位置是相对于其包含元素的填充(padding)的外部界限的,所有的溢出都会扩展到边框之下。CSS3引入了两个新的属性,可以对其进行更精细的控制。第一个属性是:backgro...
  • linwh8
  • linwh8
  • 2016年09月23日 11:32
  • 1546

background-origin 属性

实例 相对于内容框来定位背景图像: div { background-image:url('smiley.gif'); background-repeat:no-repeat; backgro...
  • u010227447
  • u010227447
  • 2015年07月14日 20:56
  • 451

css3 background-clip和background-origin

浏览器支持: 这里的支持是指:允许开发人员修改该属性, background-clip和和background-origin 属性特征从css2规范开始就已经存在(IE6+支持特性,但是不支持开发者...
  • u014071104
  • u014071104
  • 2017年05月06日 21:54
  • 252

【CSS3】---background-origin background-clip background-size

background-origin 设置元素背景图片的原始起始位置。 语法: background-origin : border-box | padding-box | content...
  • xuan0107
  • xuan0107
  • 2015年06月04日 14:21
  • 243

CSS3之background-origin

1、属性简介      background-origin:border|content|padding|!important                   border:从border区域...
  • you23hai45
  • you23hai45
  • 2014年02月22日 22:11
  • 1296

css3中background-clip和background-origin的区别

主要介绍css3中的background-clip和background-origin的区别.
  • sir1241
  • sir1241
  • 2016年08月31日 19:25
  • 337

css3新增背景属性background-clip/background-origin/background-size

1. background-clip属性 指定背景从元素何处开始显示    值有:border-box(默认) 背景显示到border               padding-box       ...
  • xuanwuziyou
  • xuanwuziyou
  • 2015年08月27日 18:30
  • 861

CSS3 background-origin,background-clip的比较

background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性,都有border、padding、content三种。 background-orig...
  • cddcj
  • cddcj
  • 2016年12月07日 14:43
  • 241
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3的background-origin
举报原因:
原因补充:

(最多只允许输入30个字)