手把手带你了解CSS 背景属性（Background）-9543建站博客

广告：宝塔Linux面板高效运维的服务器管理软件点击【 https://www.bt.cn/p/uNLv1L 】立即购买

手把手带你了解CSS 背景属性（Background）

在制作网页时我们往往需要在网页中添加一些背景颜色、背景图像让网页更加美观，吸引访问者的眼球。CSS 中提供了一系列用于设置 HTML 元素背景效果的属性，下面本篇文章就来带大家聊聊CSS 背景属性，希望对大家有所帮助！

CSS 背景属性（Background）用于属性名CSS 版本浏览器支持1.在一个声明中设置 所有的背景属性。background1IE8- 不支持多个背景图像。IE7- 不支持"inherit"。2.背景图像是否固定或者随着页面的其余部分滚动。background-attachment1IE 不支持属性值 “inherit”。3.元素的 背景颜色。background-color1IE 不支持属性值 “inherit”。4.元素的 背景图像。background-image1IE 不支持属性值 “inherit”。5.背景图像的 开始位置。background-position1IE 不支持属性值 “inherit”。6.是否及如何重复背景图像。background-repeat1IE 不支持属性值 “inherit”。7.背景的 绘制区域。background-clip3都支持，IE8- 不支持。8.背景图片的 定位区域。background-origin3都支持，IE8- 不支持。9.背景 图片的尺寸。background-size3都支持，IE8- 不支持。

1. background 属性: 一次性集中定义 8个背景相关属性关键点：背景颜色背景图像位置背景图像尺寸背景图像重复背景图像定位位置背景绘制区域背景图像固定和滚动要使用的背景图像继承

<style type="text/css">    body    {     background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;     }</style>

登录后复制

⑴ 一个元素多个背景图像浏览器支持

IE8 以及更早的浏览器不支持即指定对个背景图像的资源地址

⑵ background 属性 “inherit” 浏览器支持

IE7 以及更早的浏览器不支持 “inherit”。IE8 需要!DOCTYPE。IE9 支持 “inherit”。

⑶ 在一个声明中，设置所有的背景属性。简写属性+集中定义: 是一种 CSS 简写属性，用于一次性集中定义各种背景属性，包括 color, image, origin与 size, repeat 方式等等。【推荐学习：css视频教程】背景 background 简写属性背景属性包含其他 8 个背景属性

⑷ 背景background的属性值 包含其他 8 个背景属性 ① 可以设置如下属性和属性值：多个属性值之间 空格隔开背景层分隔: 指定多个背景层时，使用逗号分隔每个背景层是一种 CSS 简写属性，用于一次性集中定义各种背景属性，包括color, image, origin 与 size, repeat 方式等等。(每个属性的意思,可以先学习完后面的内容就能理解了)background-colorbackground-positionbackground-sizebackground-repeatbackground-originbackground-clipbackground-attachmentbackground-imageinherit继承② 背景background的属性值省略 如果不设置其中的某个值，也不会出问题比如 background:#ff0000 url('smiley.gif');也是允许的。③ 背景简写默认值 没有指定具体默认值not specified对于所有简写属性，任何没有被指定的值都会被设定为它们的初始值。

⑸ 每个背景层的语法 在每一层中，下列的值可以出现 0 次或 1 次：每个背景层, 最多只能出现一次的属性① 背景图像的固定和滚动: background-attachment② 背景图像: background-image③ 背景图像位置: background-position④ background-size⑤ 背景图像重复方式: background-repeat

⑹ 限定的代码位置 ① background-size 的代码位置 background-size 只能紧跟在背景位置 background-position 后面出现，以"/"分割如： “center/80%”.② background-clip 和 background-origin 可能出现的次数 0 次、1 次或 2 次(最多两次)如果出现 1 次:它 同时设定 background-origin 和 background-clip。如果出现 2 次:第一次的出现设置 background-origin，第二次的出现设置 background-clip。③ 背景颜色 background-color的代码位置 只能被包含在最后的背景层中。只能在background的 最后一个属性上 定义，因为 整个元素只有一种背景颜色。

⑺ 背景background 的继承性

不继承no

⑻ 尽量使用背景background属性

设置背景技巧: 建议使用简写属性，而不是使用单个属性旧浏览器的支持好: 这个简写属性, 在较老的浏览器中能够得到更好的支持代码少: 需要键入的字母也更少。

⑼ 背景简写background的版本

CSS1 + CSS3

⑽ 背景简写background 的JavaScript 语法

object.style.background="white url(paper.gif) repeat-y"

⑾ 背景简写background的浏览器支持

示例1: 背景相关的属性在一个属性background中集中定义.

p{/*background-image: url(../images/四叶草背景.png);*//*background-repeat: no-repeat;*//*第一个值 水平位置,第二个值 垂直位置*//*background-position: 50px 100px;*/    /*背景固定*//*background-attachment: fixed;*//*background-color: yellow;*/background: url(../images/四叶草背景.png) no-repeat 50px 100px;}

登录后复制

2. background-color 属性: 元素的背景颜色 (纯色,范围到边框区的外边缘)⑴ 元素的背景颜色: background-color 设置元素的 背景颜色 会设置元素的背景色, 属性的值为颜色值或关键字"transparent"二者选其一.设置一种纯色使用 background-color 属性背景颜色属性

⑵ 背景颜色的填充范围 元素的内容、内边距 和 边框区域 ① 扩展到元素 边框的外边界 （但不包括外边距）。② 如果 边框有透明 部分（如虚线边框）会透过这些透明部分显示出背景色

⑶ 背景颜色语法

background-color:color_name red |hex_number #ff0000| rgb_number rgb(255,0,0)| transparent| inherit;

语法示例

/* 关键字 或 颜色名 Keyword values */background-color: red;background-color: indigo;/* 十六进制值 Hexadecimal value  (设置透明值 和 不设置 不透明值) */background-color: #bbff00;    /* 完全不透明 Fully opaque (不设置 不透明值)*/background-color: #bf0;       /* 完全不透明的 简写 Fully opaque shorthand (不设置 不透明值)*/background-color: #11ffee00;  /* 完全透明 Fully transparent (设置 不透明值)*/background-color: #1fe0;      /* 完全透明的 简写 Fully transparent shorthand (设置 不透明值) */background-color: #11ffeeff;  /* 完全不透明 Fully opaque (设置 不透明值)*/background-color: #1fef;      /* 完全不透明的 简写 Fully opaque shorthand (设置 不透明值) *//* RGB value */background-color: rgb(255, 255, 128);        /* 完全不透明 Fully opaque */background-color: rgba(117, 190, 218, 0.5);  /* 50%透明 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;

登录后复制

⑷ 背景颜色属性值

关键点：颜色名十六进制 rgb代码透明继承

① 颜色名: color_name

颜色值为 颜色名称的背景颜色（比如 red）。

② 十六进制: hex_number

颜色值为 十六进制值的背景颜色（比如 #ff0000）。

③ rgb: rgb(),rgba()

颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）

④ hsl:hsl(),hsla()

⑤ 透明 (无颜色,默认值): transparent

背景颜色为透明色。该颜色看上去将是背景色。从技术上说，它是带有阿尔法通道为最小值的黑色，是rgba(0,0,0,0)的简写。严格来说, 透明色,也是一种颜色.

⑥ 继承:inherit

从父元素继承 background-color 属性的设置

⑸ 背景颜色继承性 不继承no⑹ 背景颜色 css 版本 CSS1⑺ JavaScript 语法 object.style.backgroundColor="#00FF00"

⑻ 背景颜色和可访问性 可访问性问题对比度: 要确保背景颜色和文本颜色之间的对比度足够高，以使视觉条件差的人能够阅读页面的内容。颜色对比度 是通过比较文本的亮度和背景颜色值来确定的。为了满足当前的 Web 内容可访问性准则(WCAG)文本内容的比例: 4.5:1大一些的文本(如标题)的比例为 3:1。大文本定义为18.66px，粗体bold或更大，24px或更大。

⑼ 实用工具: WebAIM: 对比检查器 Contrast Checker (网页版)

检查文字颜色和背景颜色,看是否能够很好的满足用户的视觉需要

⑽ 用户的感知和可访问性 Perceivable - Accessibility | MDN(英文版待翻译)提供了关于如何编写 web 内容的实用建议，使其符合 web 内容可访问性指南(WCAG) 2.0和2.1的可感知原则中列出的成功标准。感知状态: 是指用户必须能够以某种方式感知它，使用他们的一种或多种感官。

⑾ 背景图像和背景颜色 图像覆盖在颜色上方: 背景图像,覆盖在背景颜色的上面.背景的统一颜色,背景色是在指定的背景图像后呈现的尽管颜色仍然可以通过图像中的任何透明度看到。

⑿ 背景颜色background-color 的浏览器支持

示例1: 同时显示背景图像和背景颜色

背景图像,覆盖在背景颜色的上面.

css

.bgimg-fixed {    background-color: pink;        background-image: url(../images/四叶草背景.png);        background-repeat: no-repeat;}

登录后复制

示例2: 把十六进制值的颜色, 设置了透明值. (最后两位,每位的值: 0-f)改变透明度 (即最后多加的两位的值),颜色也会随之改变)00: 完全透明了,看不到颜色,跟没设置颜色一样.ff: 就是纯红色了,相当于没加透明值.

    /*把十六进制 设置了透明值的 红色,最后两位的 33 就是透明值*/    background-color: #ff000066;    background-image: url(../images/四叶草背景.png);    background-repeat: no-repeat;}

登录后复制

3. background-image 属性: 背景图像 (范围到内边距区的外边缘,不含边框)

⑴ 背景图像:

为一个元素设置一个或多个背景图像。background-image 属性背景图像属性

⑵ 元素的背景范围

背景色: background-color

背景色默认到 边框区的外边缘

边框区的下方会显示背景色,虚线边框的话,可以直接看到边框下的背景色

背景图像: background-image

背景图像不重复时 (background-repeat:no-repeat;),图像默认在 内边距区的外边缘

不在边框区,也不会显示在边框的下方 (特意加粗的边框,下方没有背景图像).

⑶ 背景图像的位置

元素的左上角: 默认地，背景图像的位置位于元素的左上角重复: 在水平和垂直方向上重复

⑷ 背景图像的语法

background-image: none|url('URL')|inherit;

⑸ 背景图像的属性值 关键点：路径url 不显示继承① 图像路径/地址: url('URL') 指向图像的路径,简单的静态图像，用 URL引用url值带引号.② 无图像 (默认值): none 不显示 背景图像。如果一个指定的图像无法被绘制，浏览器会等同于其值被设为 none。(比如，被指定的 URI 所表示的文件无法被加载)③ 继承: inherit 从父元素继承 background-image 属性的设置。④ 渐变图像 gradient 相关的方法 生成的渐变图像

⑹ 背景图像不可用的预防措施 (回退) ① 设置背景颜色:设置一种可用的背景颜色 background-color 假如背景图像不可用，页面也可以获得良好的视觉效果。② 不显示背景色也要设置 (图像的回退):即使图像是不透明的，背景色在通常情况下并不会被显示，开发者仍然应该指定背景颜色 background-color 属性。如果图像无法被加载—例如，在网络连接断开的情况下—背景色就会被绘制。

⑺ 背景图像相关属性

① 设置背景图像: background-image

在元素的背景中设置一个图像

② 图像的重复方式: background-repeat

可以沿着某个轴（x 轴或 y 轴）平铺重复，或者根本不重复。

③ 图像的位置:background-position

根据 background-position 属性的值放置。

④ 图像/背景色的裁剪/绘制区域: background-clip

⑻ 多背景图像的使用 ① 逗号分隔: 一个background-image指定多个背景图像,用逗号,分隔多个背景地址.② z 方向堆叠: 在绘制时，图像以 z 方向堆叠的方式进行。③ 代码在前,显示在上: 先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像“最接近用户”。

⑼ 和背景图像的相对位置

① 边框在背景图像之上:元素的边框 border会在背景图像之上被绘制② 背景颜色在背景图像之下:背景颜色 background-color 会在背景图像之下绘制。③ 位置关系: 边框(最上方,最接近用户) > 背景图像 > 背景颜色背景图像无法覆盖边框背景颜色无法覆盖背景图像

⑽ 图像和盒子:

图像的绘制与盒子以及盒子的边框的关系，需要在 CSS 属性 background-clip 和 background-origin中定义。

示例1: 同时设置两个背景图片

#lizard{background-image: url("../images/lizard.png"), url("../images/star.png");}

登录后复制两个都是矢量图,图片背景都是透明的代码在前,显示在上: 代码在前面的图像,显示在上方.

如果背景图像的背景不是透明的(比如其他部分是白色 ≠透明色),可能会完全遮盖会下方的图像.

示例2: 同时设置两个背景图像,并分别设置不同的重复方式.

#lizard{background-image: url("../images/四叶草背景.png"), url("../images/lizard.png");background-repeat: no-repeat,repeat;}

登录后复制

背景不透明的遮盖性:因为四叶草不是背景透明的图片(整个图片的其余部分是白色).所以除了四叶草 ,其余部分也遮盖了一部分下方的图像.

关联知识: <image> css 图像数据类型 CSS的<image> 图像数据类型 描述的是 2D 图形。表示一个 二维图像。CSS 中的两种类型的图像：① 简单的静态图像经常用URL引用② 动态生成 的图像比如 DOM 树的部分元素样式渐变或者计算样式产生使用 gradient 相关的方法或element()生成附加的 CSS图像函数 包括image()、image-set()和cross-fade()。

图像搭配的 CSS属性

background-image、border-image、content、cursor和 list-style-image。一个 < image > CSS 图像数据类型的分类 <image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>① 使用url()方法: (常用,熟记) 用url 引用的图像② gradient 相关的方法 生成的图像 (常用,熟记)③ element()方法: (实验中方法)

页面的一个部分，定义在element()方法中；

④ image() 函数 (实验中方法)

由image()函数定义的一种图像、图像片段或颜色的实色块

⑤ cross-fade() 函数

由cross-fade() 函数定义的两个或多个图像的混合。

⑥ image-set() 函数根据 image-set() 函数定义的分辨率进行选择的图像。

图像类型值的浏览器支持

更多详情: <image> CSS 图像数据类型

有效的图像引用值：

/* url()方法, 只要 test.jpg 是图像文件*/url(test.jpg)   /*一个 <gradient> 标签*/ linear-gradient(to bottom, blue, red)  /*页面的一部分, 使用了element()方法,如果 colonne3 是存在于页面中的一个元素id即可*/element(#colonne3)       image(ltr 'arrow.png#xywh=0,0,16,16', red)                             /* <url>的一个16x16节，从原来的左上角开始图像只要arrow.png 是一个支持的图像，否则是一个固体红色的样布。如果语言是rtl，则图像将水平翻转. */ cross-fade(20% url(twenty.png), url(eighty.png))                             /* 交叉褪色的图像，其中20%是不透明的80%是不透明的. */ image-set('test.jpg' 1x, 'test-2x.jpg' 2x)                              /* 具有不同分辨率的 图像的选择 */

登录后复制

4. background-attachment 属性: 背景图像的固定和滚动⑴ 设置背景图像的附着方式 (固定/滚动) 背景图像附着 background-attachment 属性决定背景图像的位置是在窗口内固定，还是随着包含它的区块滚动。背景图像附着方式属性

⑵ 背景图像附着 background-attachment的属性值 关键点：滚动固定继承

① 滚动(默认值): scroll

背景图像会随着页面其余部分的滚动而移动。跟着元素一起滚动: (但如果这个元素内部的内容是可滚动的, 不跟元素的内容一起滚动)背景相对于元素本身固定(跟着元素一起滚动)，而不是随着元素的内容滚动（对元素边框是有效的,因为它实际上附加在元素的边框上）。(注意区分: 相对于元素,还是相对于 元素的内容,因为有的元素不仅仅会随着页面滚动,元素本身也可能是可滚动的 ,且有一个滚动条. )

② 固定: fixed

当页面的其余部分滚动时，背景图像不会移动。背景 相对于视口 固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。不跟元素(或元素的内容) 一起滚动 元素滚动时,背景图像的位置不变元素滚动后,如果元素内容的位置,不在背景图像覆盖的位置,那么针对这个元素设置的背景图像就不会再显示.

③ 相对于元素内容固定: local

表示背景相对于元素的内容固定。跟着元素一起滚动: 如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。

④ 继承父元素: inherit

从父元素继承，来决定背景图像的固定或滚动。(听爸爸的话…)

⑶ 背景图像附着语法 background-attachment: scroll|fixed|local|inherit;

/* Keyword values */background-attachment: scroll;background-attachment: fixed;background-attachment: local;/* Global values */background-attachment: inherit;background-attachment: initial;background-attachment: unset;

登录后复制

⑷ 背景图像附着继承性 不继承no⑸ background-attachment的版本 CSS1⑹ 背景图像附着的 JavaScript 语法 object.style.backgroundAttachment="fixed"

⑺ 背景图像附着 background-attachment的浏览器支持

注释：任何版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。

示例1: 背景图像显示在固定位置,不跟元素一起随着页面滚动css

.bgimg-fixed{background-image: url(../images/四叶草背景.png);background-attachment: fixed;background-repeat: no-repeat;}

登录后复制html

p{/*background-image: url(../images/四叶草背景.png);*//*background-repeat: no-repeat;*//*第一个值 水平位置,第二个值 垂直位置*//*background-position: 50px 100px;*/    /*背景固定*//*background-attachment: fixed;*//*background-color: yellow;*/background: url(../images/四叶草背景.png) no-repeat 50px 100px;}0

登录后复制

① 背景图像一直显示在固定的位置: fixed

元素内容滚动时,背景图像的位置不变元素内容滚动后,如果元素内容的位置,不在背景图像覆盖的位置,那么针对这个元素设置的背景图像就不会再显示.

② 跟着元素一起滚动: scroll(默认值)

示例2: 多背景图支持

background-attachment属性支持多张背景图片。① 对应对个背景图片: 用 逗号分隔 来为每一张背景图片指定不同的background-attachment。② 顺序对应: 每一张背景图片顺序对应相应的 background-attachment 类型。

css

p{/*background-image: url(../images/四叶草背景.png);*//*background-repeat: no-repeat;*//*第一个值 水平位置,第二个值 垂直位置*//*background-position: 50px 100px;*/    /*背景固定*//*background-attachment: fixed;*//*background-color: yellow;*/background: url(../images/四叶草背景.png) no-repeat 50px 100px;}1

登录后复制

5. background-position 属性: 背景图像的位置 (先水平,后垂直, 关键词,百分比,长度值)背景图像的位置:为每一个背景图片设置初始位置。这个位置是相对于由 background-origin 定义的位置图层的。背景图像如果要重复background-repeat，将从这一点开始background-position 属性背景图像位置属性

背景图像位置的使用注意事项 需要设置背景图像固定 background-attachment="fixed"才能保证背景位置属性在 Firefox 和 Opera 中正常工作。

背景图像位置的语法 background-position: x% y%| xpos ypos|(left center right)X (top center bottom);

p{/*background-image: url(../images/四叶草背景.png);*//*background-repeat: no-repeat;*//*第一个值 水平位置,第二个值 垂直位置*//*background-position: 50px 100px;*/    /*背景固定*//*background-attachment: fixed;*//*background-color: yellow;*/background: url(../images/四叶草背景.png) no-repeat 50px 100px;}2

登录后复制

背景图像位置的属性值 (关键词,百分比,长度值,混用)① 关键词: left center right x top center bottom 两个值: 先水平，后垂直,省略一个是居中center 水平方向：左边，中心，右边 left center right垂直方向：上边，中心，下边 top center bottom② 百分比: x% y% 相对于 :左边缘的 x 坐标，相对于上边缘 y 坐标默认值：0% 0%。两个值: 先水平，后垂直,省略一个是居中50% 水平位置: x% 第一个值垂直位置: y% 第二个值左上角: 0% 0%右下角: 100% 100%百分比值无效的情况:如果背景图片的大小和容器一样，那设置百分比的值将永远无效，因为“容器和图片的差”为0 （图片永远填满容器，并且图片的相对位置和容器的相对位置永远重合）。使用绝对值: 在这种情况下，需要为偏移使用绝对值（例如 px）。偏移值的计算 百分比值的偏移: 指定图片的相对位置和容器的相对位置重合x 偏移值 = (container width - image width) * (position x%)y 偏移值 = (container height - image height) * (position y%)

所以两个大小一样的时候,百分比值才会无效,因为偏移值会一直等于 0

③ 长度 xpos ypos 相对于: 左边缘的 x 坐标，相对于上边缘的 y坐标两个值: 先水平，后垂直,省略一个是居中 50% 水平位置: xpos 第一个值垂直位置: ypos 第二个值左上角: 0 0。单位像素 (0px 0px)其他的 CSS 单位。④ 混合使用: 百分比,关键词和长度 % 和 position 值。

属性值的数目

① 两个值:单个背景图像一般都是两个值 (x,y) , 先指定水平位置，后指定垂直位置.,一个方向指定一个值即可,所以 top top 和 left left 是无效的.② 一个值:只有一个值,第二个值默认是居中

属性值的分隔

可以为多个背景图像的指定位置值，用逗号 , 隔开。

属性值的正负: 图片位移方向

① 正值: 将图片相对容器右移和下移 (右下)② 负值: 将图片相对容器左移和上移 (左上)

背景图像位置的浏览器支持

示例1: 背景图像的位置只写一个属性值,来指定位于中上方.

p{/*background-image: url(../images/四叶草背景.png);*//*background-repeat: no-repeat;*//*第一个值 水平位置,第二个值 垂直位置*//*background-position: 50px 100px;*/    /*背景固定*//*background-attachment: fixed;*//*background-color: yellow;*/background: url(../images/四叶草背景.png) no-repeat 50px 100px;}3

登录后复制

只指定一个方向上的值另一个方向上的值默认是居中.top = cente topleft = left center

示例2: 只指定一个百分比值,默认是水平方向的,另一个垂直方向,默认居中 50% 10% = 10% 50%

p{/*background-image: url(../images/四叶草背景.png);*//*background-repeat: no-repeat;*//*第一个值 水平位置,第二个值 垂直位置*//*background-position: 50px 100px;*/    /*背景固定*//*background-attachment: fixed;*//*background-color: yellow;*/background: url(../images/四叶草背景.png) no-repeat 50px 100px;}4

登录后复制

示例3: 同时指定两个方向的位置,比如, 右下方.

p{/*background-image: url(../images/四叶草背景.png);*//*background-repeat: no-repeat;*//*第一个值 水平位置,第二个值 垂直位置*//*background-position: 50px 100px;*/    /*背景固定*//*background-attachment: fixed;*//*background-color: yellow;*/background: url(../images/四叶草背景.png) no-repeat 50px 100px;}5

登录后复制

关键字的位置名,不分先后顺序因为从名字上,就能看出是水平方向的还是垂直方向的.

示例4: 同时指定关键字的位置名和长度值/百分比值,指明距离上下左右边缘的的距离.距离右边缘 10px,距离下边缘60px background-position: right 10px bottom 60px;长度值换成百分比值,同样有效,也是指定距离值.关键字后面不指定距离值,默认就是紧贴着边缘的.也可以只为一个方向指定距离值 right 10px bottom,这样也合法.

p{/*background-image: url(../images/四叶草背景.png);*//*background-repeat: no-repeat;*//*第一个值 水平位置,第二个值 垂直位置*//*background-position: 50px 100px;*/    /*背景固定*//*background-attachment: fixed;*//*background-color: yellow;*/background: url(../images/四叶草背景.png) no-repeat 50px 100px;}6

登录后复制

更多距离值分析图: 一个位置的多种写法top 75px left 100x = left 100px top 75px (可以调换关键字位置名的顺序,距离值要保持在位置名后方)bottom left 25% = top 100% 25% bottom = top 100%left 25% = 25%right = right center = left 100% center = left 100% top 50% right = left 100%垂直 center = top 50% = bottom 50%

示例5: 同时指定两个背景图像的位置和重复方式

p{/*background-image: url(../images/四叶草背景.png);*//*background-repeat: no-repeat;*//*第一个值 水平位置,第二个值 垂直位置*//*background-position: 50px 100px;*/    /*背景固定*//*background-attachment: fixed;*//*background-color: yellow;*/background: url(../images/四叶草背景.png) no-repeat 50px 100px;}7

登录后复制

示例6: 设置背景图像位置的负值负值: 图像向相反方向位移.

p{/*background-image: url(../images/四叶草背景.png);*//*background-repeat: no-repeat;*//*第一个值 水平位置,第二个值 垂直位置*//*background-position: 50px 100px;*/    /*背景固定*//*background-attachment: fixed;*//*background-color: yellow;*/background: url(../images/四叶草背景.png) no-repeat 50px 100px;}8

登录后复制

6. background-repeat 属性 : 背景图像的重复方式 (单值,双值,超出部分裁剪)⑴ 背景图像的重复方式 设置是否及如何 重复背景图像 background-repeat 属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。重复图像的裁剪: 默认情况下，重复的图像被剪裁为元素的大小，但它们可以缩放 (使用 round) 或者均匀地分布 (使用 space).背景图像重复属性实际上，针对背景图像

⑵ 背景图像重复的语法 background-repeat: repeat|repeat-x|repeat-y|no-repeat|inherit;

p{/*background-image: url(../images/四叶草背景.png);*//*background-repeat: no-repeat;*//*第一个值 水平位置,第二个值 垂直位置*//*background-position: 50px 100px;*/    /*背景固定*//*background-attachment: fixed;*//*background-color: yellow;*/background: url(../images/四叶草背景.png) no-repeat 50px 100px;}9

登录后复制① 单值语法 = 双值语法的简写:两个值: 先水平(第一个值),后垂直 (第二个值)单值等价的双值repeat-x= repeat no-repeatrepeat-y= no-repeat repeatrepeat= repeat repeatspace= space spaceround= round roundno-repeat= no-repeat no-repeat② 标准语法 <repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}属性值的搭配使用:除了 repeat-x | repeat-y, 其他的可以在一个背景图像的双值语法中搭配使用.

⑶ 背景图像重复的属性值

关键点：双向重复（默认）水平重复垂直重复不重复继承

① 双向重复 (默认值): repeat

背景图像将在垂直方向和水平方向都重复。图像会按需重复来覆盖整个背景图片所在的区域.

不合适会被裁剪: 最后一个图像, 如果它的大小不合适的话, 会被裁剪.

最右边的被裁剪了,最下方漏出来的一点,也可以看出是被裁剪的.

② 水平重复: repeat-x

背景图像将在水平方向重复。不合适会被裁剪: 最后一个图像, 如果它的大小不合适的话, 会被裁剪.

可以看到右边缘的地方,图像被裁剪了.

③ 垂直重复: repeat-y

背景图像将在垂直方向重复。不合适会被裁剪: 最后一个图像, 如果它的大小不合适的话, 会被裁剪.

可以看到下边缘的地方, 图像被裁剪了

④ 不重复: no-repeat

背景图像将不重复, 仅显示一次。会被裁剪: 背景图像本身大小太大,超出了元素的边框,会被裁剪.

没有被重复的背景图像的位置: 是由 background-position 属性来决定.

⑤ 重复部分的图像不会被裁剪: space

图像会尽可能得重复, 但是不会裁剪.

❶ 重复的图像不会被裁剪: 重复的图像,超出元素边框,就会把超出的部分去掉,放大其余的部分来填充 (不会进行裁剪式的重复)

固定在元素边缘上: 第一个和最后一个图像会被固定在元素的相应的边上,

空白的均匀分布: 同时空白会均匀地分布在图像之间.

❷ 背景图像本身大小超出元素大小: 背景原图像本身的大小,就超出元素边框了,则进行裁剪.

space值排斥的属性:

background-position 图像定位属性会被忽视,

⑥ 压缩显示图像(不裁剪): round

图像的伸展和压缩:随着元素的大小的增长, 被重复的图像将会伸展(没有空隙), 直到有足够的空间来添加一个图像时, 添加一个新的图像, 压缩其他图像,来显示新的图像.不裁剪: 通过伸展和压缩 ,显示完整图像,不裁剪图像.添加图像和图像压缩: 当下一个图像被添加后, 所有的当前的图像会被压缩来腾出空间.

本来是放不下两个完整的图像的(背景图像本身比较大),浏览器把图像压缩后 ,就能放下两个完整的图像了.

添加图像: 留白 >= 图像宽度的一半时 , 添加另一个图像。

⑦ 继承父亲: inherit

从父元素继承 background-repeat 属性的设置。

⑷ 背景图像重复 background-repeat 属性和属性值浏览器支持

示例1: 把背景图像设置成 round space和 round = round round的区别

/* 关键字 或 颜色名 Keyword values */background-color: red;background-color: indigo;/* 十六进制值 Hexadecimal value  (设置透明值 和 不设置 不透明值) */background-color: #bbff00;    /* 完全不透明 Fully opaque (不设置 不透明值)*/background-color: #bf0;       /* 完全不透明的 简写 Fully opaque shorthand (不设置 不透明值)*/background-color: #11ffee00;  /* 完全透明 Fully transparent (设置 不透明值)*/background-color: #1fe0;      /* 完全透明的 简写 Fully transparent shorthand (设置 不透明值) */background-color: #11ffeeff;  /* 完全不透明 Fully opaque (设置 不透明值)*/background-color: #1fef;      /* 完全不透明的 简写 Fully opaque shorthand (设置 不透明值) *//* RGB value */background-color: rgb(255, 255, 128);        /* 完全不透明 Fully opaque */background-color: rgba(117, 190, 218, 0.5);  /* 50%透明 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;0

登录后复制

① 默认时的背景显示 = 双向重复repeat

可以看到右边和下边缘都有被裁剪

② 值为: round space 时

水平方向: 压缩图像显示完整图像垂直方向: 有超出不裁剪的部分去掉,伸展剩下的图像,空白均匀分布.

可以看到背景会重复时,水平和垂直方向, 都没有被裁剪的部分.

③ 值为: round = round round 时

可以看到垂直方向的背景, 比上面的space值多了一行图像.因为round 值通过压缩其余的图像,多显示了一行,而不只是去掉图像被裁剪的部分.

裁剪的区别: space 会因为背景图像本身大小超出元素大小时(不是因为图像的重复),被裁剪, 但round 一直都不会被裁剪,因为会压缩图像来显示.

7. CSS3 background-clip 属性: 背景色/图像的绘制/裁剪区域 (背景显示的区域)⑴ 背景裁剪区域/ 绘制区域 设置背景的绘制区域 / 背景被裁剪区域背景显示区域: 显示给用户看的区域,其他部分就算有背景 ,裁剪掉了,也看不到.background-clip 属性背景裁剪属性没有设置背景 (即没有设置背景图像 background-image或背景颜色 background-color)视觉效果: 则背景裁剪区域 background-clip 仅在边框具有透明区域或部分不透明区域 (根据边框样式 border-style 或边框图像 border-image)时才具有视觉效果;否则，边框掩盖了差异。

⑵ 背景裁剪/绘制语法 background-clip:border-box|padding-box|content-box;

/* 关键字 或 颜色名 Keyword values */background-color: red;background-color: indigo;/* 十六进制值 Hexadecimal value  (设置透明值 和 不设置 不透明值) */background-color: #bbff00;    /* 完全不透明 Fully opaque (不设置 不透明值)*/background-color: #bf0;       /* 完全不透明的 简写 Fully opaque shorthand (不设置 不透明值)*/background-color: #11ffee00;  /* 完全透明 Fully transparent (设置 不透明值)*/background-color: #1fe0;      /* 完全透明的 简写 Fully transparent shorthand (设置 不透明值) */background-color: #11ffeeff;  /* 完全不透明 Fully opaque (设置 不透明值)*/background-color: #1fef;      /* 完全不透明的 简写 Fully opaque shorthand (设置 不透明值) *//* RGB value */background-color: rgb(255, 255, 128);        /* 完全不透明 Fully opaque */background-color: rgba(117, 190, 218, 0.5);  /* 50%透明 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;1

登录后复制

⑶ 背景裁剪的属性值

关键点：边框盒内边距框内容框文字

① 边框盒(默认): border-box

背景被裁剪到边框盒。背景延伸到边框的外部边缘 (但在z顺序中是在边框的下面)。边框显示在背景上方: 如果边框是虚线，背景会从下方透出来.包括: 边框

② 内边距框: padding-box

背景被裁剪到内边距框。背景延伸到内边距的外部边缘。不包括: 边框 边框的下面没有背景。

③ 内容框 : content-box

背景被裁剪到内容框。背景是在内容框内绘制的。不包括: 边框和内边距

④ 文字: text (尚在实验中的属性)

背景是在前景文本(foreground text)中绘制的。把背景显示成文本的颜色.使用前提:❶ 需要浏览器前缀❷ 文本装饰或阴影不包括在裁剪区域中❸ 文字的颜色: 一定要设置成 color:transparent 透明色这样才能在文字里, 显示出后面的背景色/图像,否则会被文字原本的颜色遮挡住背景色/图像.

⑷ 盒子模型分界图

从内到外的顺序: 内容区 > 内边距区 > 边框区 > 外边距区

⑸ 背景色/图像的裁剪/绘制区域的浏览器支持 IE 9+ 才开始支持, IE 8 以及更早的版本不支持 background-clip 属性。黄色: 需要浏览器前缀

低版本的浏览器也需要浏览器支持,这是个比较新的属性.

示例1: 把背景的裁剪/绘制区域分别设置为到边框的外边缘, 内边距的外边缘, 内容区,文字的内部

html

/* 关键字 或 颜色名 Keyword values */background-color: red;background-color: indigo;/* 十六进制值 Hexadecimal value  (设置透明值 和 不设置 不透明值) */background-color: #bbff00;    /* 完全不透明 Fully opaque (不设置 不透明值)*/background-color: #bf0;       /* 完全不透明的 简写 Fully opaque shorthand (不设置 不透明值)*/background-color: #11ffee00;  /* 完全透明 Fully transparent (设置 不透明值)*/background-color: #1fe0;      /* 完全透明的 简写 Fully transparent shorthand (设置 不透明值) */background-color: #11ffeeff;  /* 完全不透明 Fully opaque (设置 不透明值)*/background-color: #1fef;      /* 完全不透明的 简写 Fully opaque shorthand (设置 不透明值) *//* RGB value */background-color: rgb(255, 255, 128);        /* 完全不透明 Fully opaque */background-color: rgba(117, 190, 218, 0.5);  /* 50%透明 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;2

登录后复制css

/* 关键字 或 颜色名 Keyword values */background-color: red;background-color: indigo;/* 十六进制值 Hexadecimal value  (设置透明值 和 不设置 不透明值) */background-color: #bbff00;    /* 完全不透明 Fully opaque (不设置 不透明值)*/background-color: #bf0;       /* 完全不透明的 简写 Fully opaque shorthand (不设置 不透明值)*/background-color: #11ffee00;  /* 完全透明 Fully transparent (设置 不透明值)*/background-color: #1fe0;      /* 完全透明的 简写 Fully transparent shorthand (设置 不透明值) */background-color: #11ffeeff;  /* 完全不透明 Fully opaque (设置 不透明值)*/background-color: #1fef;      /* 完全不透明的 简写 Fully opaque shorthand (设置 不透明值) *//* RGB value */background-color: rgb(255, 255, 128);        /* 完全不透明 Fully opaque */background-color: rgba(117, 190, 218, 0.5);  /* 50%透明 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;3

登录后复制① 到边框的外边缘 : border-box 可以看到显示在边框的下面,因为边框是虚线,所以可以看到漏出来的一部分背景图 background-image.对背景色 background-color,也是有效的.

② 到内边距区的外边缘: background-clip:padding-box 背景色和背景图像不包括边框区的位置

/* 关键字 或 颜色名 Keyword values */background-color: red;background-color: indigo;/* 十六进制值 Hexadecimal value  (设置透明值 和 不设置 不透明值) */background-color: #bbff00;    /* 完全不透明 Fully opaque (不设置 不透明值)*/background-color: #bf0;       /* 完全不透明的 简写 Fully opaque shorthand (不设置 不透明值)*/background-color: #11ffee00;  /* 完全透明 Fully transparent (设置 不透明值)*/background-color: #1fe0;      /* 完全透明的 简写 Fully transparent shorthand (设置 不透明值) */background-color: #11ffeeff;  /* 完全不透明 Fully opaque (设置 不透明值)*/background-color: #1fef;      /* 完全不透明的 简写 Fully opaque shorthand (设置 不透明值) *//* RGB value */background-color: rgb(255, 255, 128);        /* 完全不透明 Fully opaque */background-color: rgba(117, 190, 218, 0.5);  /* 50%透明 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;4

登录后复制

③ 到内容区的外边缘 : content-box 背景色和背景图像,不会包括边框和内边距区

④ 在文字的内部: text 注意: 这个时候,文字的颜色 color ≠#fff 白色,一定要设置成 color:transparent 透明色,才能在文字里, 显示出后面的背景色.否则,背景色/图像,会被文字原本的颜色遮挡住.

8. CSS3 background-origin 属性: 背景图像的原点相对区域 (对背景色无效,搭配 background-position )⑴ 背景图像的原点相对区域:① 用于: 设置背景图像的原点: 相对于边框区，内边距区或内容区开始。设置背景图像出现在哪个区域background-origin 属性美 ['ɔrɪdʒɪn]背景图像原点属性② 搭配属性:位置: 当设置背景图像的位置 background-position 属性,指定是相对于什么区域来定位的。★ 用于不重复的背景图像: 设置 background-repeat:no-repeat 不重复,再设置图像原点,看起来才比较明显否则默认的图像,会双向重复,把边框区,内边距区等都覆盖了,看不出相对位置了.

⑵ 不能用于固定的背景图像 背景图像为固定的 : background-attachment:fixed，则背景图像原点background-origin 属性没有效果。因为固定的背景图像, 是相对于浏览器窗口不动的,给它指定区域,也不会动,所以不会有效果.所以,要留意属性之间的影响.

⑶ 背景图像原点的语法 background-origin: padding-box|border-box|content-box;

/* 关键字 或 颜色名 Keyword values */background-color: red;background-color: indigo;/* 十六进制值 Hexadecimal value  (设置透明值 和 不设置 不透明值) */background-color: #bbff00;    /* 完全不透明 Fully opaque (不设置 不透明值)*/background-color: #bf0;       /* 完全不透明的 简写 Fully opaque shorthand (不设置 不透明值)*/background-color: #11ffee00;  /* 完全透明 Fully transparent (设置 不透明值)*/background-color: #1fe0;      /* 完全透明的 简写 Fully transparent shorthand (设置 不透明值) */background-color: #11ffeeff;  /* 完全不透明 Fully opaque (设置 不透明值)*/background-color: #1fef;      /* 完全不透明的 简写 Fully opaque shorthand (设置 不透明值) *//* RGB value */background-color: rgb(255, 255, 128);        /* 完全不透明 Fully opaque */background-color: rgba(117, 190, 218, 0.5);  /* 50%透明 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;5

登录后复制

⑷ 背景图像原点的属性值 ① 边框区:border-box 背景图像相对于边框区来定位。② 内边距区(默认值): padding-box 背景图像相对于内边距区来定位。③ 内容区: content-box 背景图像相对于内容区来定位。多值: 同时设置多个背景图像的原点相对区域时,多个属性值之间 ,用逗号, 分隔.background-origin: content-box, padding-box;

⑸ 盒子模型分界图 从内到外的顺序: 内容区 > 内边距区 > 边框区 > 外边距区

⑹ 背景图像原点 background-origin的浏览器支持

比较新的属性,需要使用浏览器前缀

示例1: 将背景图像的原点分别设置为相对于边框区,内边距区,内容区

/* 关键字 或 颜色名 Keyword values */background-color: red;background-color: indigo;/* 十六进制值 Hexadecimal value  (设置透明值 和 不设置 不透明值) */background-color: #bbff00;    /* 完全不透明 Fully opaque (不设置 不透明值)*/background-color: #bf0;       /* 完全不透明的 简写 Fully opaque shorthand (不设置 不透明值)*/background-color: #11ffee00;  /* 完全透明 Fully transparent (设置 不透明值)*/background-color: #1fe0;      /* 完全透明的 简写 Fully transparent shorthand (设置 不透明值) */background-color: #11ffeeff;  /* 完全不透明 Fully opaque (设置 不透明值)*/background-color: #1fef;      /* 完全不透明的 简写 Fully opaque shorthand (设置 不透明值) *//* RGB value */background-color: rgb(255, 255, 128);        /* 完全不透明 Fully opaque */background-color: rgba(117, 190, 218, 0.5);  /* 50%透明 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;6

登录后复制① 背景图像原点: 相对于边框区 border-box 可以看到虚线边框的下方,有漏出来的背景图像

② 背景图像原点: 相对于内边距区 padding-box 可以看到边框的下方已经不显示背景图像了

③ 背景图像原点: 相对于内容区 content-box 背景图像,只显示在内容区的部分,边框和内边距部分,都不显示图像

示例2: 指定背景图像的原点相对区域,再设置背景的位置背景图像的原点相对于内容区,向右和向下移动10px

/* 关键字 或 颜色名 Keyword values */background-color: red;background-color: indigo;/* 十六进制值 Hexadecimal value  (设置透明值 和 不设置 不透明值) */background-color: #bbff00;    /* 完全不透明 Fully opaque (不设置 不透明值)*/background-color: #bf0;       /* 完全不透明的 简写 Fully opaque shorthand (不设置 不透明值)*/background-color: #11ffee00;  /* 完全透明 Fully transparent (设置 不透明值)*/background-color: #1fe0;      /* 完全透明的 简写 Fully transparent shorthand (设置 不透明值) */background-color: #11ffeeff;  /* 完全不透明 Fully opaque (设置 不透明值)*/background-color: #1fef;      /* 完全不透明的 简写 Fully opaque shorthand (设置 不透明值) *//* RGB value */background-color: rgb(255, 255, 128);        /* 完全不透明 Fully opaque */background-color: rgba(117, 190, 218, 0.5);  /* 50%透明 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;7

登录后复制

9. CSS3 background-size 属性: 背景图像的大小 (可定义宽高)⑴ 背景图像的大小:设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时 , 缩放到元素的可用空间的尺寸。background-size 属性背景图像大小属性背景颜色和背景图像:没有被背景图片覆盖的背景区域 , 仍然会显示用 background-color 属性设置的背景颜色。此外，如果背景图片设置了透明或者半透明属性，在背景图片后面的背景色也会穿过透明区域显示出来。

⑵ 背景图像大小的语法 background-size: length|percentage % |cover|contain;

/* 关键字 或 颜色名 Keyword values */background-color: red;background-color: indigo;/* 十六进制值 Hexadecimal value  (设置透明值 和 不设置 不透明值) */background-color: #bbff00;    /* 完全不透明 Fully opaque (不设置 不透明值)*/background-color: #bf0;       /* 完全不透明的 简写 Fully opaque shorthand (不设置 不透明值)*/background-color: #11ffee00;  /* 完全透明 Fully transparent (设置 不透明值)*/background-color: #1fe0;      /* 完全透明的 简写 Fully transparent shorthand (设置 不透明值) */background-color: #11ffeeff;  /* 完全不透明 Fully opaque (设置 不透明值)*/background-color: #1fef;      /* 完全不透明的 简写 Fully opaque shorthand (设置 不透明值) *//* RGB value */background-color: rgb(255, 255, 128);        /* 完全不透明 Fully opaque */background-color: rgba(117, 190, 218, 0.5);  /* 50%透明 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;8

登录后复制

⑶ 背景图像大小的属性值

① 宽高长度值: 宽 x 高

设置背景图像的高度和宽度。不允许有负值。宽 X 高 第一个值: 设置宽度第二个值: 设置高度。一个值:这个值指定图片的宽度，图片的高度隐式的为 auto

② 宽高百分比值: width% height%

以 父元素的百分比 来设置背景图像的宽度和高度。不允许有负值。percentage %宽 X 高 第一个值: 设置宽度第二个值: 设置高度。一个值:这个值指定图片的宽度，图片的高度隐式的为 auto指定背景图片 相对背景区的百分比。背景区: 由背景图像原点相对区域 background-origin设置默认背景区域: 盒模型的 内容区与内边距，也可设置为只有内容区，或者还包括边框。如果是固定的背景图像 background-attachment 为fixed，背景区为 浏览器可视区（即视窗），不包括滚动条。不能为负值。

③ 裁剪式完全覆盖背景区 : cover

图像伸展: 把背景图像伸展至足够大, 以使背景图像完全覆盖背景区域。不改变图片比例: 保持图像的宽高比例（图像不会被压扁）。该背景图以它的全部宽或者高覆盖所在容器。图片可能会裁剪: 背景图像的某些部分, 也许无法显示在背景定位区域中。当容器元素和背景图大小不同时，背景图的左/右或者上/下部分会被裁剪。

④ 不裁剪式完全覆盖背景区: contain

把背景图像伸展至最大尺寸, 使其宽度和高度完全适应背景区域。不裁剪,不改变图片比例: 在不裁剪或拉伸图像的情况下，将图像缩放到尽可能大的范围。

⑤ 按图片比例自动缩放:auto

以背景图片的比例缩放背景图片。

▲ 多个值: 若要指定多个背景图像的大小，请使用逗号,分隔每个背景图像的值。

同时设置 3个背景图像的大小: background-size: 50% 25%, contain, 3em;

⑷ 固有尺寸(宽高) 与固有比例(宽高比) ① 位图: 位图图像(如.JPG) 总是具有固有的大小和比例。② 矢量图: 可能两者都有，也可能只有一个。矢量图像(如SVG)不一定具有固有尺寸。如果它有水平和垂直的固有尺寸: 它也有固有比例如果它没有尺寸或者只有一个尺寸: 它可能有也可能没有比例.③ 渐变: 没有固有的尺寸和比例。④ element()函数: 使用element()函数创建的背景图像使用生成元素的固有尺寸和比例。

⑸ 背景图片的大小计算： 数值的计算: 取决于图像的固有尺寸(宽度和高度) 和固有比例 (宽高比)① 指定了宽高:如果指定了 background-size 的两个值并且不是auto背景图片 按指定大小渲染② contain 或 cover 保留固有比例，最大的包含或 覆盖背景区如果图像没有固有比例，则按 背景区大小③ auto 或 auto auto 有宽高: 如果图像同时具有水平和垂直的固有尺寸，则按该大小呈现。按这个尺寸没有固有尺寸与固有比例则按 背景区的大小没有固有尺寸, 但是有固有比例效果同 contain,不裁剪,按比例显示.只有一个固定尺寸与比例则由此尺寸与比例计算大小只有一个固定尺寸但是没有比例它使用指定的尺寸和背景定位区域的另一个尺寸进行渲染。④ 一个为 auto ,另一个不是 auto 图像有固有比例指定的长度使用指定值未指定的长度按比例缩放: 由指定值与固有比例计算。图像没有固有比例指定的长度使用指定值未指定的长度使用图像相应的固有长度，若没有固有长度，则使用背景区相应的长度注意: 对于没有固有尺寸或固有比例的矢量图 , 不是所有的浏览器都支持。特别注意测试 Firefox 7-与 Firefox 8+，以确定不同之处能否接受。

⑹ 背景图像大小 background-size 的浏览器支持

需要使用的浏览器前缀

/* 关键字 或 颜色名 Keyword values */background-color: red;background-color: indigo;/* 十六进制值 Hexadecimal value  (设置透明值 和 不设置 不透明值) */background-color: #bbff00;    /* 完全不透明 Fully opaque (不设置 不透明值)*/background-color: #bf0;       /* 完全不透明的 简写 Fully opaque shorthand (不设置 不透明值)*/background-color: #11ffee00;  /* 完全透明 Fully transparent (设置 不透明值)*/background-color: #1fe0;      /* 完全透明的 简写 Fully transparent shorthand (设置 不透明值) */background-color: #11ffeeff;  /* 完全不透明 Fully opaque (设置 不透明值)*/background-color: #1fef;      /* 完全不透明的 简写 Fully opaque shorthand (设置 不透明值) *//* RGB value */background-color: rgb(255, 255, 128);        /* 完全不透明 Fully opaque */background-color: rgba(117, 190, 218, 0.5);  /* 50%透明 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;9

登录后复制

示例1: 如果您使用渐变<gradient>作为背景并指定了背景尺寸background-size

渐变图像要明确指定宽高:最好不要指定只使用单个auto值，或者只使用宽度值来指定(例如，background-size: 50%)。因为,在这种情况下，渲染渐变值<gradient>s在 Firefox 8 中发生了变化，目前在不同的浏览器之间通常是不一致的并不是所有的浏览器, 都完全按照 CSS3 的 background-size 规范和 CSS3 的 Image Values gradient 规范来实现渲染。

安全值示例

.bgimg-fixed {    background-color: pink;        background-image: url(../images/四叶草背景.png);        background-repeat: no-repeat;}0

登录后复制实例 css

.bgimg-fixed {    background-color: pink;        background-image: url(../images/四叶草背景.png);        background-repeat: no-repeat;}1

登录后复制宽 300px,高100px

.bgimg-fixed {    background-color: pink;        background-image: url(../images/四叶草背景.png);        background-repeat: no-repeat;}2

登录后复制示例2: 分别设置不同值的背景图像大小不设置背景图像的默认显示(图像不重复)只设置宽度值: background-size: 200px;(按比例缩放)宽高一起设置: background-size: 200px 100px;(按指定值,可能改变比例)裁剪式完全覆盖: background-size: cover;(按比例缩放)不裁剪式安全覆盖: background-size: contain;(按比例缩放)

（学习视频分享：web前端入门）

以上就是手把手带你了解CSS 背景属性（Background）的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~