您现在的位置是：首页 > 文章详情

CSS-背景来源 | background-origin

日期：2018-09-11点击：549收藏

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;
}