1、属性简介

background-origin：border|content|padding|!important

border：从border区域开始显示背景；

content：从content区域开始显示背景；

padding：从padding区域开始显示背景。

		/*背景图像相对边框盒来定位*/
		background-origin:border-box;

		/*背景图像相对内容框来定位*/
		background-origin:content-box;

		/*背景图像相对于内边距框来定位*/
		background-origin:padding-box;

		/*提高指定样式规则的应用优先权*/
		background-origin:!important;

2、浏览器兼容性
（1）IE6、7、8不兼容
（2）Firefox 3.0、3.5兼容
（3）Chrome 1.0.x、2.0.x兼容

3、属性实例
<!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" />
<title>CSS3之background-origin</title>
<style type="text/css">
    body{
		background-color:#FCC;
		width:60%;
		height:100px;
		font-size:24px;
		font-weight:bolder;
	}
	div{
		background:#C6F url(image.jpg);
		background-color:#9FF;
		width:100%;
		height:100%;

		-moz-background-origin:border;
		-webkit-background-origin:border;

		/*-moz-background-origin:content;

		-moz-background-origin:padding;
		-webkit-background-origin:padding;

		-webkit-background-origin:!important;
		-moz-background-origin:!important;*/
	}
</style>
</head>

<body>
  <div>
     CSS3之background-origin
  </div>
</body>
</html>

4、运行结果




CSS3之background-origin的更多相关文章

  1. CSS3中background属性的调整

    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...

  2. css3 背景background

    Css3背景<background> Css3包含多个新的背景属性,它们提供了对背景更强大的控制.可以自定义背景图的大小,可以规定背景图片的定位区域,css3还允许我们为元素使用多个背景图 ...

  3. css3-background clip 和background origin

    1.background-origin background-origin 里面有3个参数 : border-box | padding-box | content-box; border-box,p ...

  4. css2和CSS3的background属性简写

    1.css2:background:background-color || url("") || no-repeat || scroll || 0 0;  css3:  backg ...

  5. css3的Background新属性

    前言 CSS3中出现了几种关于背景图片的新属性:background-origin.background-clip.background-position等.之前大致了解了下,但是background ...

  6. CSS背景和CSS3背景background属性

    css背景属性用于定义HTML元素的背景 背景属性既可以为单个的单元设置背景,也可以为整个页面设置背景,可以对上述二者的任意组合设置背景,段落.文字.不同状态的链接.图像.内容区域修改其背景样式.设置 ...

  7. css3之background

    background background: (1)url(image1.png) right bottom, (2)url(image2.png) center, (3)url(image3.png ...

  8. [CSS3] CSS Background Images

    Body with background image and gradient html { background: linear-gradient(#000, white) no-repeat; h ...

  9. 巧用CSS3之background渐变

    常见斑马loading 上图是我们常见的loading进度条,以前都是用一张背景图片平铺的.其实如果抛去兼容性因素,我们可以用零图片纯样式来实现. 一,首先,我们先为容器定义一个纯蓝色背景: box{ ...

  10. css3 background

    background是一个很重要的css属性,在css3中新增了很多内容.一方面是原有属性新增了属性值,另一方面就是新增了3个属性. 一.css3中新增属性值介绍 css2的background有5个 ...

随机推荐

  1. 【Spring】HttpMessageConverter的作用及替换

    相信使用过Spring的开发人员都用过@RequestBody.@ResponseBody注解,可以直接将输入解析成Json.将输出解析成Json,但HTTP 请求和响应是基于文本的,意味着浏览器和服 ...

  2. JAVA设计模式---迭代器模式

    1.定义: 提供一种方法顺序访问一个聚合对象中的各个元素,而又不暴露其内部的表示. 2.实例:1)需求: 菜单(煎饼屋菜单.餐厅菜单和咖啡菜单)采用不同的集合存取(ArrayList,String[] ...

  3. Eclipse EE遇到问题记录

    Eclipse EE可以进行Java web的开发,下面记录了使用Eclipse EE调试时遇到的一些问题. 1.tomcat启动timeout的设置,双击server,主窗口就变为了server的配 ...

  4. Spring对远程服务的支持

    Java程序有以下的远程调用技术选择: 远程过程调用(RPC)是同步的,客户端在服务器端返回结果之前将一直被阻塞. 各种技术适用的场景如下: 典型的RMI开发的过程如下: 定义一个接口,用于客户端和服 ...

  5. 2018-01-08 学习随笔 SpirngBoot整合Mybatis进行主从数据库的动态切换,以及一些数据库层面和分布式事物的解决方案

    先大概介绍一下主从数据库是什么?其实就是两个或N个数据库,一个或几个主负责写(当然也可以读),另一个或几个从只负责读.从数据库要记录主数据库的具体url以及BigLOG(二进制日志文件)的参数.原理就 ...

  6. web攻击

    一.XSS(跨站脚本攻击) 最常见和基本的攻击WEB网站的方法.攻击者在网页上发布包含攻击性代码的数据.当浏览者看到此网页时,特定的脚本就会以浏览者用户的身份和权限来执行.通过XSS可以比较容易地修改 ...

  7. js小技巧：数组去重

    JavaScript 数组中去除重复的数据 var arr = [1, 2, 2, 3, '1', null, 'a', 'b', 'a']; var t = {}; var result = arr ...

  8. 分布式集群下的Session存储方式窥探

    传统的应用服务器,自身实现的session管理是大多是基于单机的,对于大型分布式网站来说,支撑其业务的远远不止一台服务器,而是一个分布式集群,请求在不同的服务器之间跳转.那么,如何保持服务器之前的se ...

  9. ajax请求中contentType与dataType区别

    contentType: 告诉服务器,我要发什么类型的数据,默认值: "application/x-www-form-urlencoded". dataType:告诉服务器,我要想 ...

  10. Servlet3.0上传图片示例

    一.前端JSP页面 <%@page pageEncoding="UTF-8"%><!DOCTYPE html><html><head> ...