css中background-origin属性的使用
background-origin用来规定元素背景图像的相对定位位置，它有三个属性值：
1、border-box
border-box表示元素背景图像相对于border区域开始定位。
代码如下：
<!doctype html>
<html>
<head>
<style>
*{margin:0;padding:0;}
.box{width:430px;height:280px;margin:100px auto;background:url("fengjing.jpg") no-repeat;padding:5px;border:5px dotted #000;
font-size:100px;font-weight:bold;background-origin:border-box;]
</style>
</head>
<body>
<div class="box "></div>
</body>
</html>
效果如下：
从上图可以看出,元素的背景图像从边框区域开始定位。
2、padding-box
padding-box表示元素背景图像相对于padding区域开始定位。
代码如下：
<!doctype html>
<html>
<head>
<style>
*{margin:0;padding:0;}
.box{width:430px;height:280px;margin:100px auto;background:url("fengjing.jpg") no-repeat;padding:5px;border:5px dotted #000;
font-size:100px;font-weight:bold;background-origin:padding-box;]
</style>
</head>
<body>
<div class="box "></div>
</body>
</html>
效果如下：
从上图可以看出：元素背景图像从padding区域开始定位。
3、content-box
content-box表示元素背景图像相对于content区域开始定位。
代码如下：
<!doctype html>
<html>
<head>
<style>
*{margin:0;padding:0;}
.box{width:430px;height:280px;margin:100px auto;background:url("fengjing.jpg") no-repeat;padding:5px;border:5px dotted #000;
font-size:100px;font-weight:bold;background-origin:content-box;]
</style>
</head>
<body>
<div class="box "></div>
</body>
</html>
效果如下：
从上图可以看出：元素的背景图像初始位置从content区域开始定位。
总结，background-origin属性定义了背景图像的相对定位位置，这个位置可以用background-position来改变，而且元素背景图像的区域不会因此被限定住，只对元素背景图像起作用。如果元素使用background-attachment属性时，该属性会失效。
css中background-origin属性的使用的更多相关文章
- css中background背景属性概
css中background背景属性概 background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/background:url(背景图片路径) no-repeat ...
- css中background背景属性概述
background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径) no-repeat center;/*不重复背景图片中间显示 ...
- Css中的Position属性
Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...
- 深入理解css中的margin属性
深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...
- 理解与应用css中的display属性
理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...
- CSS中的display属性（none,block,inline,inline-block,inherit）
css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...
- 前端CSS-font属性,超链接的美化,css精灵,background综合属性
前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px " ...
- css中的定位属性position（转）
css中的定位属性position 同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来 ...
- CSS中background的用法
CSS中 background 是一个很基本的而且比较常用的样式 background : background-color || background-image || background-re ...
- CSS中的display属性
CSS中的display属性 display:block是可以把非块级元素强制转换为块级元素显示,如内嵌元素span,原来不支持设置宽高,宽度是由内容撑开的,几个span元素是在同一行内的,如果给sp ...
随机推荐
- js的StringBuffer类
function StringBuffer(str){ var arr = []; str = str || ""; arr.push(str); this.append = fu ...
- 【css】最近使用的两种图标字体库
## 0. 前言 比较基础的图标加载:<img src="x.png">和块元素的背景background: url(./x.png). 页面多图标时,使用雪碧图(多个 ...
- 回溯法、DFS
回溯法 为了求得问题的解,先选择某一种可能情况向前探索,在探索过程中,一旦发现原来的选择是错误的,就退回上一步重新选择条件,继续向前探索,如此反复进行,直至得到解或证明无解. DFS DFS模板 vo ...
- 洛谷——P2341 [HAOI2006]受欢迎的牛//POJ2186:Popular Cows
P2341 [HAOI2006]受欢迎的牛/POJ2186:Popular Cows 题目背景 本题测试数据已修复. 题目描述 每头奶牛都梦想成为牛棚里的明星.被所有奶牛喜欢的奶牛就是一头明星奶牛.所 ...
- 7-20 Windows消息队列 （25 分）（模拟水题）
题意: 思路: 用优先队列直接模拟就OK了,另外优先队列存pair的时候比较的是first的值,实测!! 上代码: #include <iostream> #include <que ...
- nexus3的安装和使用
参考:https://www.cnblogs.com/2YSP/p/9533506.html http://www.54tianzhisheng.cn/2017/10/14/Nexus3-Maven/ ...
- Django REST framework 渲染器、版本
渲染器.版本: # settings.py REST_FRAMEWORK = { "DEFAULT_RENDERER_CLASSES": [ "rest_framewor ...
- 6.4.1 标准库 os、os.path 与 shutil 简介
os模块除了提供使用操作系统功能和访问文件系统的简便方法之外,还提供了大量文件与文件夹操作的方法,如下表所示. 方法 功能说明 access(path,mode) 按照 mode 指定的权限访问文件 ...
- Master Nginx(8) - Troubleshooting Techniques
Analyzing log files Error log file formats Error log file entry examples Configuring advanced loggin ...
- static 语句块
static{}(即static块),会在类被加载的时候执行且仅会被执行一次,一般用来初始化静态变量和调用静态方法,下面我们详细的讨论一下该语句块的特性及应用. 一.在程序的一次执行过程中,stati ...