您的位置:首页> 前端教程> CSS3教程
文章导航

CSS3 background-origin

2018-7-30 13:00| 作者: admin| 查看: 896| 评论: 0|来自: 蚂蚁部落

大神们学习一门新语言比较快,除了本身思维能力强大以外,还有一个很大的原因就是技术都是相通的。

比如C#中的类与Java中的类大同小异,基本可以说一模一样,CSS也是如此。

background-origin属性就和transform-origin比较类似。

origin翻译成汉语是“原点”的意思,在数学上,原点是坐标轴的交汇点,CSS中大致如此。

transform-origin用来设置变换的原点位置,background-origin则是用来设置背景图片的原点位置。

语法结构:

[CSS] 纯文本查看 复制代码
background-origin:border-box|padding-box|content-box

规定元素中背景图片开始绘制的位置,当然开始绘制的位置和属性值有关,下面分别做一下介绍。

一.border-box:

此属性值规定背景图片从border区域开始绘制(包括border),坐标原点在左上角。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>background-origin属性-蚂蚁部落</title> 
<style type="text/css"> 
ul li{ 
  border:10px dashed green; 
  width:250px; 
  height:200px; 
  padding:10px; 
  margin-top:10px; 
  list-style:none; 
  background-repeat:no-repeat;
} 
.border-box{ 
  background-origin:border-box;
  background-image:url(mytest/demo/small.jpg); 
} 
</style> 
</head> 
<body> 
<ul class="test"> 
  <li class="border-box"></li> 
</ul> 
</body> 
</html>

由以上代码可以看出背景图片是从边框开始渲染的,包括边框区域,图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201808/05/211129y3nc3banm3fnwzea.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

二.padding-box:

规定背景图片是从padding开始绘制的,包括padding区域,坐标原点在左上角。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>background-origin属性-蚂蚁部落</title> 
<style type="text/css"> 
ul li{ 
  border:10px dashed green; 
  width:250px; 
  height:200px; 
  padding:10px; 
  margin-top:10px; 
  list-style:none; 
  background-repeat:no-repeat;
} 
.padding-box{ 
  background-origin:padding-box;
  background-image:url(mytest/demo/small.jpg); 
} 
</style> 
</head> 
<body> 
<ul class="test"> 
  <li class="padding-box"></li> 
</ul> 
</body> 
</html>

在以上代码中,背景图片是从padding区域开始绘制的,图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201808/05/211423sjiu44szi3iib7s8.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

三.content-box:

规定背景图片从内容区域开始绘制(内容区域就是除border和padding之外的区域),坐标原点在左上角。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>background-origin属性-蚂蚁部落</title> 
<style type="text/css"> 
ul li{ 
  border:10px dashed green; 
  width:250px; 
  height:200px; 
  padding:10px; 
  margin-top:10px; 
  list-style:none; 
  background-repeat:no-repeat;
} 
.content-box{ 
  background-origin:content-box;
  background-image:url(mytest/demo/small.jpg); 
} 
</style> 
</head> 
<body> 
<ul class="test"> 
  <li class="content-box"></li> 
</ul> 
</body> 
</html>

以上代码的表现可以看出,背景图片是从内容区域开始绘制的,图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201808/05/211616cxz171xv4sm1jx3p.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可能有类似疑问,既然规定了从内容区域开始绘制,为什么padding和border区域都有背景图片显示。

实质区别在于,可以绘制和开始绘制是两个概念,参阅background-origin属性和background-clip区别一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部