文章导航

CSS background-origin

2019-11-21 12:27| 作者: admin| 查看: 40| 评论: 0|来自: 钱柜手机网页版

通过background-position属性可以设置背景图片位置。

那么必须以一个坐标系为参考,对背景图片进行定位操作。

默认,坐标系原点是元素border-box左上角位置,向左为x轴正方向,向下为y轴正方向。

图示演示如下:

aid[3651]

通过background-origin属性可以改变此坐标系的默认原点位置。

语法结构:

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

下面通过代码实例详细介绍一下每一个属性值的功能。

一.border-box:

它是默认属性值,规定坐标系的默认原点位置在border-box区域的左上角。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="" /> 
<title>钱柜手机网页版</title> 
<style type="text/css">
div{
  border:10px dashed green; 
  width:250px; 
  height:200px; 
  padding:10px; 
  margin-top:10px; 
  background-repeat:no-repeat;
}
.border-box{ 
  background-origin:border-box;
  background-image:url(mytest/demo/small.jpg); 
} 
</style> 
</head> 
<body>
  <div class="border-box"></div> 
</body> 
</html>

对上述代码分析如下:

(1).background-origin属性值为border-box。

(2).也就是坐标系原点为border-box区域的左上角。

(3).所以背景图片是从边框左上角开始渲染,包括边框区域。

简单图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201911/21/122903mob4cz100cm0hcbt.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

二.padding-box:

此属性值规定坐标系的默认原点位置在padding-box区域的左上角。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="" /> 
<title>钱柜手机网页版</title> 
<style type="text/css">
div{
  border:10px dashed green; 
  width:250px; 
  height:200px; 
  padding:10px; 
  margin-top:10px; 
  background-repeat:no-repeat;
}
.border-box{ 
  background-origin:padding-box;
  background-image:url(mytest/demo/small.jpg); 
} 
</style> 
</head> 
<body>
  <div class="border-box"></div> 
</body> 
</html>

对上述代码分析如下:

(1).background-origin属性值为padding-box。

(2).也就是坐标系原点为padding-box区域的左上角。

(3).所以背景图片从padding区域开始绘制渲染,包括padding区域。

简单图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201911/21/122931uufhghn3s8zfgutg.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

三.content-box:

此属性值规定坐标系的默认原点位置在content-box区域的左上角。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="" /> 
<title>钱柜手机网页版</title> 
<style type="text/css">
div{
  border:10px dashed green; 
  width:250px; 
  height:200px; 
  padding:10px; 
  margin-top:10px; 
  background-repeat:no-repeat;
}
.border-box{ 
  background-origin:content-box;
  background-image:url(mytest/demo/small.jpg); 
} 
</style> 
</head> 
<body>
  <div class="border-box"></div> 
</body> 
</html>

对上述代码分析如下:

(1).background-origin属性值为content-box。

(2).也就是坐标系原点为content-box区域的左上角。

(3).所以背景图片从内容区域开始绘制渲染。

简单图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201911/21/122958x1thijir8mjjjrsm.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

属性总体比较简单,如果对本文有任何疑问可以在文章底部留言。


鲜花

握手

雷人

路过

鸡蛋
上一篇:CSS background-clip

最新评论

返回顶部