发表前端开发22 分钟读完 (大约3225个字)

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语法：

1
2
3
4
5
6
7
8
9
10
/* 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:

1
2
3
4
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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

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

语法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* 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

1
2
3
4
5
6
7
8
9
10
11
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.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

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

语法

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

1
2
3
4
5
6
/* 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

1
2
3
4
5
6
7
8
9
10
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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会被忽略

语法

1
2
3
4
5
6
7
8
9
/* 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.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指定的背景起始位置，可设置每一个背景图片。

语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* 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

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

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* 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设定背景图片是否重复及重复的方向。支持设置水平轴、竖轴、两个轴同时或者不重复。

语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/* 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进行填充；如果背景图片是透明的情况，背景颜色也会可见。

语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* 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中固定，或者是在包含块中滚动。

语法

1
2
3
4
5
6
7
8
9
/* 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

1
2
3
4
5
6
<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

1
2
3
4
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。
除了指定的属性值，其他未指定的均为初始化值。

语法

1
2
3
4
5
6
7
8
9
10
11
/* 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

1
2
3
4
5
6
<p class="topbanner">
  Starry sky<br/>
  Twinkle twinkle<br/>
  Starry sky
</p>
<p class="warning">Here is a paragraph<p>

CSS

1
2
3
4
5
6
7
.warning {
  background: pink;
}

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

参考

MDN background

参考

background-clip和background-origin的区别

CSS中background属性的使用指南

https://blog.bookcell.org/css-background-guide/

作者

潘绳杰

发布于

2018-04-22

更新于

2025-01-19

许可协议

#

评论

关注我

链接

分类

最新文章

标签

$interval1
$timeout1
$uibModal1
20171
20184
20198
20205
20212
API1
APP1
Android1
Angular1
AngularJS1
Angularjs1
Apache1
BSD1
BT1
BrowserSync1
CSS1
Creative Commons1
D21
D31
DOM3
Data Visualization1
ECMAScript2
ES62
Echarts1
FE1
GPL1
Git1
HTTP3
JavaScript7
Kindle1
Linux1
MIT1
Mozila1
Next2
React3
React Router1
Reactjs1
Redux1
SEE Conf1
SMART法则1
SSH1
Spec2
SublimeLInter1
URL2
Virtual DOM1
WWW2
Web1
Web, 安全, 前端1
absolute1
ag-grid1
angularjs6
background1
baidumap1
book1
cache1
chrome1
cli1
cookie1
css6
custom1
d21
data1
default1
echarts1
editor1
editorconfig1
es51
es61
eslint2
essential1
export1
flexbox2
float1
git2
github1
gitignore1
google1
grid1
hexo2
html51
html入门1
html学习1
i18next2
image1
import1
javascript1
jquery1
js1
jsconf1
jsdoc1
license6
linux4
loader1
loading1
localStorage1
mac1
map1
module1
multi accout1
named1
new1
nginx1
npm1
placement1
prettier1
priciple1
quirks1
recommend1
remote1
search1
session1
sessionStorage1
share1
ssh2
standard1
sublime2
sublime Text 31
table1
tag1
theme1
url1
visualization1
web1
web component1
webpack1
web组件1
wordpress1
yarn1
三栏1
下载1
书单8
书格前端2
会议3
入门4
共享桌面1
关键字1
养生1
前端4
前端开发36
前端开发, angular, pnpm1
前端开发，百度地图1
升级1
博客1
原型1
原型链1
原理3
双飞翼1
只管去做1
团队1
团队分享1
国际化2
图表1
圣杯1
多语言1
头像1
存储1
安卓1
实战1
对象1
少即是多1
工具13
布局1
年度1
开发1
开源协议6
弹性盒2
怪异模式1
总结3
感悟1
感想1
成长1
指南4
搜索引擎1
效率3
教程1
数据1
数据可视化2
方法3
旅游1
日本1
最佳实践1
标准模式1
概念1
模块化2
浮动1
游记1
生产环境1
生活3
电动车1
目标2
知乎专栏2
笔记3
简介1
组件2
绝对定位1
继承1
缓存1
网格1
脚手架1
自定义1
虚拟DOM1
表格1
规范3
论坛1
读书13
读书笔记1
路由1
远程控制1
速度1
锚1
阅读13
项目1
饮食1

归档

×