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 ...
随机推荐
- codevs 3385 拯救Oier（一） Save Oier—first
3385 拯救Oier(一) Save Oier—first 传送门 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 青铜 Bronze 题解 题目描述 Descr ...
- python之cookbook-day04
第一章:数据结构和算法 1.4 查找最大或最小的N个元素 问题: 怎样从一个集合中获得最大或者最小的 N 个元素列表? 解决方案: heapq 模块有两个函数:nlargest() 和 nsmalle ...
- 清北学堂模拟赛d5t5 exLCS
分析:比较巧妙的一道题.经典的LCS算法复杂度是O(nm)的,理论上没有比这个复杂度更低的算法,除非题目有一些限制.这道题中两个字符串的长度不一样,f[i][j]如果表示第一个串前i个,第二个串前j个 ...
- Xmemcached使用之与Spring整合
转自:http://hi.baidu.com/tjbaso/item/22f3c32b062ebefb50fd87b8 1 简介Xmemcached是一个高性能的基于java nio的memcache ...
- CCEditBox/CCEditBoxImplMac
#ifndef __CCEditBoxIMPLMAC_H__ #define __CCEditBoxIMPLMAC_H__ #include "cocos2d.h" #if (CC ...
- volatile非原子性示例
volatile非原子性示例 学习了:<Java多线程编程核心技术>高洪岩 著 Page124 package com.stono.thread2.page124_2; public cl ...
- [Cypress] Interact with Hidden Elements in a Cypress Test
We often only show UI elements as a result of some user interaction. Cypress detects visibility and ...
- 实例介绍Cocos2d-x中Box2D物理引擎：碰撞检測
在Box2D中碰撞事件通过实现b2ContactListener类函数实现,b2ContactListener是Box2D提供的抽象类,它的抽象函数:virtual void BeginContact ...
- 安卓Recovery模式该怎么用？【转】
本文转载自:http://android.baike.com/article-109914.html 安卓系统出了名的刷机刷机再刷机,说起刷机就不能不谈Recovery模式,这项刷机过程中最重要的一到 ...
- mysql中DATETIME类型与TIMESTAMP的区别
1.DATETIME的日期范围是1001--9999年,TIMESTAMP的时间范围是1970--2038年. 2.DATETIME存储时间与时区无关,TIMESTAMP存储时间与时区有关,显示的值也 ...