CSS中background属性的使用指南

2018年4月22日

CSS中background属性的使用指南

css中关于background属性的用法，经常会使用到，并且老是记不清，这里做一下总结，方便后面开发查阅。

background是多个属性的简写，因此要了解background中各个属性的用法，才能理解其本身。background是按照以下的顺序进行设置的: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, 和background-attachment。

background-clip

背景裁剪用于设置背景图或者背景颜色是否覆盖元素的边框

background-clip语法：

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

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

值的说明： border-box: 背景扩展到元素的border外边沿，Z轴上是显示在下方。

padding-box: 背景扩展到元素的padding外边沿，border底下无背景绘制。

content-box: 背景绘制在内容区域(content)。

text: 试验性属性值，背景仅绘制在文本背景下。

Demo:

<p class="border-box">The background extends behind the border.</p>
<p class="padding-box">The background extends to the inside edge of the border.</p>
<p class="content-box">The background extends only to the edge of the content box.</p>
<p class="text">The background is clipped to the foreground text.</p>

p {
  border: .8em darkviolet;
  border-style: dotted double;
  margin: 1em 0;
  padding: 1.4em;
  background: linear-gradient(60deg, red, yellow, red, yellow, red);
  font: 900 1.2em sans-serif;
  text-decoration: underline;
}

.border-box { background-clip: border-box; }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }

.text {
  background-clip: text;
  -webkit-background-clip: text;
  color: rgba(0,0,0,.2);
}

结果

See the Pen Examples by Perry (@perry2008084) on CodePen.

参考

MDN backgroud-clip

background-color

背景颜色设置一个元素的背景颜色

语法:

/* Keyword values */
background-color: red;
background-color: indigo;

/* Hexadecimal value */
background-color: #bbff00;    /* Fully opaque */
background-color: #11ffee00;  /* Fully transparent */
background-color: #11ffeeff;  /* Fully opaque */

/* RGB value */
background-color: rgb(255, 255, 128);        /* Fully opaque */
background-color: rgba(117, 190, 218, 0.5);  /* 50% transparent */

/* HSL value */
background-color: hsl(50, 33%, 25%);         /* Fully opaque */
background-color: hsla(50, 33%, 25%, 0.75);  /* 75% transparent */

/* Special keyword values */
background-color: currentcolor;
background-color: transparent;

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

值的说明：

设定的颜色值会渲染在background-image下方，如果图片是透明的话会看到背景色。

Demo:

HTML

<div class="exampleone">
  Lorem ipsum dolor sit amet, consectetuer
</div>

<div class="exampletwo">
  Lorem ipsum dolor sit amet, consectetuer
</div>

<div class="examplethree">
  Lorem ipsum dolor sit amet, consectetuer
</div>

CSS

.exampleone {
  background-color: teal;
  color: white;
}

.exampletwo {
  background-color: rgb(153,102,153);
  color: rgb(255,255,204);
}

.examplethree {
  background-color: #777799;
  color: #FFFFFF;
}

结果

See the Pen Examples by Perry (@perry2008084) on CodePen.

参考

MDN background-color

background-image

背景图片设置一张或多张图片到一个元素上

语法

支持多张图片，使用逗号分隔

/* Keyword values */
background-image: none;
background-image:
  linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
  url('https://mdn.mozillademos.org/files/7693/catfront.png'),
  url("../../media/examples/star.png");

值的说明

none设定无图片 imgage 指定要显示的图片，支持多图片多图片情况下，第一张设定的图片在最上层，依次往下叠

Demo

HTML

<div>
  <p class="catsandstars">
    This paragraph is full of cats<br />and stars.
  </p>
  <p>This paragraph is not.</p>
  <p class="catsandstars">
    Here are more cats for you.<br />Look at them!
  </p>
  <p>And no more.</p>
</div>

CSS

p {
  font-size: 1.5em;
  color: #FE7F88;
  background-image: none;
  background-color: transparent;
}

div {
  background-image:
      url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
}

.catsandstars {
  background-image:
      url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
      url("https://mdn.mozillademos.org/files/7693/catfront.png");
  background-color: transparent;
}

结果

See the Pen Examples by Perry (@perry2008084) on CodePen.

参考

MDN background-image

background-origin

background-orgin设置背景的定位区域；针对background-image属性指定的图片在元素中显示的起始位置。当background-attachment设置为fixed之后，background-origin会被忽略

语法

/* 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;

值的说明

border-box 背景定位在border box中

padding-box 背景定位在padding box中

content-box 背景定位在content box中

Demo

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

参考

MDN background-origin

background-position

background-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-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

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

值的说明

位置通过x/y轴坐标来设定，相对于元素盒模型的边缘进行放置。支持使用一个或两个值来定义。如果两个值被使用，第一个值表示水平位置，第二个值表示垂直位置。如果一个值被指定，那么第二个值会被假定为center。

一个值语法：

center关键字，居中图片
top,left,bottom,right其中之一，指定哪一个边缘进行放置图片，另一维度被设置为50%，因此图片被放置在指定边缘的中间
长度或百分比，指定X轴上相对于左侧边缘的位置，Y轴设置为50%

两个值语法：

top,left,bottom,right其中之一，如果left或者right先设置，那么这个值定义X轴位置，另一个值定义Y轴位置。如果top和bottom先设置，那么这个值定义Y轴，另一个值定义X轴
长度或者百分比，如果另一个值为left或right，那么这个值定义Y轴位置，相对于顶部边缘。如果另一个值为top或bottom，那么这个值定义X轴位置，相对于左侧边缘。如果两个值都为长度或者百分比的值，那么第一个值定义X轴位置，第二个值定义Y轴位置

注意: top top和left right是无效的，不能两个值同时设置X轴或者Y轴。

Demo

HTML

<div class="exampleone">Example One</div>
<div class="exampletwo">Example Two</div>
<div class="examplethree">Example Three</div>

CSS

/* Shared among all <div>s */
div {
  background-color: #FFEE99;
  background-repeat: no-repeat;
  width: 300px;
  height: 80px;
  margin-bottom: 12px;
}

/* These examples use the `background` shorthand property */
.exampleone {
  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 2.5cm bottom no-repeat;
}
.exampletwo {
  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 3em 50% no-repeat;
}

/* Multiple background images: Each image is matched with the
   corresponding position, from first specified to last. */
.examplethree {
  background-image:    url("https://mdn.mozillademos.org/files/11987/startransparent.gif"),
                       url("https://mdn.mozillademos.org/files/7693/catfront.png");
  background-position: 0px 0px,
                       center;
}

参考

MDN background-position

background-repeat

background-repeat设定背景图片是否重复及重复的方向。支持设置水平轴、竖轴、两个轴同时或者不重复。

语法

/* Keyword values */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/* Two-value syntax: horizontal | vertical */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

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

值的说明

一个值的说明：

单值	对应的两个值
repeat-x	repeat no-repeat
repeat-y	no-repeat repeat
repeat	repeat repeat
space	space space
round	round round
no-repeat	no-repeat no-repeat

两个值的说明：第一个值表示水平的行为，第二个值表示垂直的行为

repeat

图片会尽可能的重复来覆盖可绘制区域。最后一张图片可能会裁剪如果空间不足
space

图片会尽可能不裁剪的重复。第一张和最后一张图片会靠在元素的边缘，空白会均匀分布在图片之间。background-position会被忽略，只有在仅能显示一张图片并不被裁剪的情况有效。使用space出现裁剪只有在空间不够显示一张图片的情况。
round

As the allowed space increases in size, the repeated images will stretch (leaving no gaps) until there is room (space left >= half of the image width) for another one to be added. When the next image is added, all of the current ones compress to allow room. Example: An image with an original width of 260px, repeated three times, might stretch until each repetition is 300px wide, and then another image will be added. They will then compress to 225px.（暂时不能够完全理解）
no-repeat

图片不会重复，因此可绘制区域可能不会完全覆盖。不重复的图片由background-position来进行定位

Demo

HTML

<ol>
  <li>no-repeat
    <div class="one"></div>
  </li>
  <li>repeat
    <div class="two"></div>
  </li>
  <li>repeat-x
    <div class="three"></div>
  </li>
  <li>repeat-y
    <div class="four"></div>
  </li>
  <li>space
    <div class="five"></div>
  </li>
  <li>round
    <div class="six"></div>
  </li>
  <li>repeat-x, repeat-y (multiple images)
    <div class="seven"></div>
  </li>
</ol>

CSS

/* Shared for all DIVS in example */
ol,
li {
  margin: 0;
  padding: 0;
}
li {
  margin-bottom: 12px;
}
div {
    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
    width: 160px;
    height: 70px;
}

/* Background repeats */
.one {
  background-repeat: no-repeat;
}
.two {
  background-repeat: repeat;
}
.three {
  background-repeat: repeat-x;
}
.four {
  background-repeat: repeat-y;
}
.five {
  background-repeat: space;
}
.six {
  background-repeat: round;
}

/* Multiple images */
.seven {
  background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
                     url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
  background-repeat: repeat-x,
                     repeat-y;
  height: 144px;
}

参考

MDN background-repeat

background-size

background-size指定元素背景图片的尺寸。图片可以保留原始尺寸，可以拉伸到一个新的尺寸，或者保留原比例并填充可用的空间。没有被背景图片覆盖的区域会由background-color进行填充；如果背景图片是透明的情况，背景颜色也会可见。

语法

/* Keyword values */
background-size: cover;
background-size: contain;

/* One-value syntax */
/* the width of the image (height becomes 'auto') */
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;

/* Two-value syntax */
/* first value: width of the image, second value: height */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;

/* Multiple backgrounds */
background-size: auto, auto; /* Not to be confused with `auto auto` */
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;

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

值的说明

contain 尽可能的缩放图片，并不对图片进行裁剪或拉伸。

cover 尽可能放大图片并不拉伸图片。如果图片的比例和元素的比例不同，图片会在竖直或水平方向裁剪已保存没有空白空间剩余。

auto 保持原有比例在相应的方向上进行等比例缩放背景图片

<length> 在对应的维度上拉伸图片到指定的长度。负值是不被允许的。

<percentage> 在对应的维度上拉伸图片到指定背景定位区域的百分比大小。负值是不被允许的。

注意：图片本身的比例会影响值的计算。

参考

MDN background-size

background-attachment

background-attachment决定图片的位置是否在viewport中固定，或者是在包含块中滚动。

语法

/* Keyword values */
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

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

值的说明

fixed 背景固定在viewport中，即使元素有滚动，背景也不会随元素滚动。（这个值和background-clip:text）

local 背景相对元素的内容固定。如果元素滚动，则背景会随着元素的内容滚动，背景可绘制区域和背景定位区域是相对于元素的可滚动区域，而不是边框区域。

scroll 背景相对于元素本身固定，并且不会随着内容滚动。

Demo

HTML

<p>
  There were doors all round the hall, but they were all locked; and when
  Alice had been all the way down one side and up the other, trying every
  door, she walked sadly down the middle, wondering how she was ever to
  get out again.
</p>

CSS

p {
  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
  background-attachment: fixed;
}

参考

MDN background-attachment

background

background属性是声明背景样式的简写，包含颜色、图片、起始位置和尺寸、重复等。背景样式的声明顺序如下： background-clip, background-color, background-image, background-origin,background-position, background-repeat, background-size和background-attachment。除了指定的属性值，其他未指定的均为初始化值。

语法

/* Using a <background-color> */
background: green;

/* Using a <bg-image> and <repeat-style> */
background: url("test.jpg") repeat-y;

/* Using a <box> and <background-color> */
background: border-box red;

/* A single image, centered and scaled */
background: no-repeat center/80% url("../img/image.png");

background属性指定一层或者多层背景，通过逗号分隔。

每一层的语法如下：

每一层包含0或者1个以下值：
- attachment
- bg-image
- position
- bg-size
- repeat-style
bg-size只立即出现在后面，并使用’/‘符合分隔，例如：“center/80%”
box相关的值允许出现0，1或者2次。如果出现1次，那么同时设置background-origin和background-clip。如果出现2次，第一个值设置background-origin，第二个值设置background-clip。
<background-color>只能在最后一层中指定。

值的说明

attachment 参考background-attachment

box 参考background-clip和background-origin

background-color 参考background-color

bg-image 参考background-image

repeat-style 参考background-repeat

bg-size 参考background-size

Demo

HTML

<p class="topbanner">
  Starry sky<br/>
  Twinkle twinkle<br/>
  Starry sky
</p>
<p class="warning">Here is a paragraph<p>

CSS

.warning {
  background: pink;
}

.topbanner {
  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed;
}

参考

MDN background

参考

background-clip和background-origin的区别