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

1、属性简介      background-origin:border|content|padding|!important                   border:从border区域...

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

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

深入浅出CSS3:background-clip,background-origin和border-image教程

深入浅出CSS3:background-clip,background-origin和border-image教程

CSS3 background-origin,background-clip的比较

background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性,都有border、padding、content三种。 background-orig...
  • cddcj
  • cddcj
  • 2016年12月07日 14:43
  • 212

css3属性中background-clip与background-origin的用法区别?

困惑在哪里? background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性,它们有相同的可选值,即border、padding、content...

css3属性中background-clip与background-origin的用法释疑

css3属性中background-clip与background-origin的用法释疑 困惑在哪里? background-clip 与 background-origin是css3中引入...

CSS3变形和动画:旋转、扭曲、缩放、位移、矩阵 、原点 transform-origin、过渡属性 transition-property、过渡所需时间 transition-duration...

旋转、扭曲、缩放、位移、矩阵 、原点 transform-origin、过渡属性 transition-property、过渡所需时间 transition-duration、过渡函数 transit...

CSS3 3D – 建立一个3D场景perspective perspective-origin

CSS3 3D – 建立一个3D场景     从昨天晚上开始看CSS3D,有个想法之前想用webGL来实现,后来发现CSS3也如此强大,而且不卡,就转投C...

CSS3:background新增特性详解

CSS3的背景新增了几个特性,这篇文章就是扯扯这些;
  • bomess
  • bomess
  • 2016年04月13日 18:28
  • 5552

CSS3-background的基本用法

*{margin:0px;padding: 0px;} .box-top{width: 50%;height: 400px;background-color: #ccc;ma...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3的background-origin
举报原因:
原因补充:

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