CSS-背景来源 | background-origin-低调大师

CSS-背景来源 | background-origin

2018-09-11 639

background-origin 规定了指定背景图片background-image属性的原点位置的背景相对区域.

/* Keyword values */
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

/* Global values */
background-origin: inherit;
background-origin: initial;
background-origin: unset;

请注意background-origin被忽略时background-attachment是fixed...

注意：当使用 background-attachment为fixed时，该属性将被忽略不起作用。

初始值	padding-box
适用元素	all elements. It also applies to ::first-letter and ::first-line.
是否是继承属性	no
适用媒体	visual
计算值	as specified
Animation type	discrete
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

background-origin属性被指定为下面列出的关键字值之一。

值

border-box背景是相对于边框的位置。padding-box背景是相对于填充框定位的。content-box背景是相对于内容框定位的。

正式语法

<box>#where 
<box> = border-box | padding-box | content-box

示例

.example {
  border: 10px double;
  padding: 10px;
  background: url('image.jpg');
  background-position: center left;
  background-origin: content-box;
}

#example2 {
  border: 4px solid black;
  padding: 10px;
  background: url('image.gif');
  background-repeat: no-repeat;
  background-origin: border-box;
}

div {
  background-image: url('logo.jpg'), url('mainback.png'); /* Applies two images to the background */
  background-position: top right, 0px 0px;
  background-origin: content-box, padding-box;
}

规范

Specification	Status	Comment
CSS Backgrounds and Borders Module Level 3The definition of 'background-origin' in that specification.	Candidate Recommendation	Initial definition.

浏览器兼容性

Feature	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic Support	1.01	12	4.02 3	9.04	10.5	3.01
content-box	1.0	12	4.02	9.05	10.5	3.01

Feature	Android	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
Basic Support	4.1	(Yes)	(Yes)	14.0	7.1	12.1	(Yes)
content-box	4.1	(Yes)	(Yes)	14.0	7.1	12.1	(Yes)

1. Webkit也支持此属性的前缀版本，在这种情况下，除了目前的关键字，替代同义词有：padding，border，和content。

2. Gecko从1.1版到1.9.2版，对应于Firefox 1.0到3.6，都支持一个不同的前缀语法：-moz-background-clip: padding | border。

3. 从Firefox 49版本以后，也支持该属性的-webkit前缀版本。

4. 在IE 7及以前，Internet Explorer的行为就像background-origin: border-box被设置了一样。在Internet Explorer 8中，就像常规默认值background-origin: padding-box被设置了一样。

5. 在IE 7和IE 9中，它总是表现得像background-clip: padding如果设置为overflow: hidden | auto | scroll

微信关注我们

原文链接：https://yq.aliyun.com/articles/638679

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

CSS-背景图片 | background-image

background-imageCSS属性的元件上设置一个或多个背景图像。 /* Single value */ background-image: url('https://example.com/bck.png'); /* Multiple values */ background-image: url('https://example.com/top.png'), url('https://example.com/bottom.png'); /* Keyword value */ background-image: none; /* Global values */ background-image: inherit; background-image: initial; background-image: unset; 背景图像在堆叠上下文层上绘制。指定的第一个图层被绘制为与用户最接近。元素的边界然后被绘制在它们的顶部，然后被background-color绘制在它们下面。如何绘制图像相对于框和它的边界由background-clip和background-originCSS...

2018-09-11

678

ckground-position指定背景图片的初始位置。这个初始位置是相对于以background-origin定义的背景位置图层来说的。 /* Keyword values */ background-position: top; background-position: bottom; background-position: left; background-position: right; background-position: center; /* <percentage> values */ background-position: 25% 75%; /* <length> values */ background-position: 0 0; background-position: 1cm 2cm; background-position: 10ch 8em; /* Multiple images */ background-position: 0 0, center; /* Edge offsets values */ background...

2018-09-11

818

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。