css中，background怎样在保证容器没有空余的情况下，占满容器？

CSS 中，要让背景图片在不拉伸变形的前提下尽可能占满容器，同时不留空余部分（即保持图片的纵横比并且填充整个容器），可以使用 background-size 属性，并设置为 cover。

言

如果网页只有一种颜色，那是非常可怕的，颜色的设置丰富了网页，就如同多彩缤纷的世界。

在了解css颜色之前，我们回顾下计算机是如何显示颜色的？计算机根据色光三原色的原理通过各种算法来显示颜色。

css 颜色 —— color

网页中使用颜色关键字、16进制字符、rgb、rgba等表示红，绿，蓝三种颜色混合色，如下示例,几种写法都是指同一个颜色（红色）：

color：red;
color: #ff0000;
color: rgb(255,0,0)
color: rgba(255,0,0,1)

对于16进制形式，每2位表示一个颜色，从左到右分别是红、绿、蓝，每种颜色取值从00 到 FF。

如下示例：

color: #000000; /*黑色*/
color: #ffffff; /*白色*/
color: #ff0000; /*红色*/
color: #00ff00; /*绿色*/
color: #0000ff; /*蓝色*/

对于rgb的表示法，由三个参数组成，分别是红、绿、蓝，每种颜色取值从0 到 255。

如下示例：

color: rgb(0,0,0); /*黑色*/
color: rgb(255,255,255); /*白色*/
color: rgb(255,0,0); /*红色*/
color: rgb(0,255,0); /*绿色*/
color: rgb(0,0,255); /*蓝色*/

红，绿，蓝值从0到255的结合，给出了总额超过1600多万不同的颜色（256 × 256 ×256）。

但是现代大多数显示器能够显示至少16384种颜色。所以在使用颜色时要格外注意，避免设置不能够显示的颜色，可以参考网页安全色：https://www.w3school.com.cn/cssref/css_colors.asp。

颜色除了有三原色红绿蓝组成，还有亮度层级，如下图：

rgba 中的a是指透明度，这个是css3新增加的属性，通过rgba可以设置更加漂亮的颜色。

css 背景 —— background

通过background属性可以设置元素的背景色、背景图片，语法如下：

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

background 在一个声明中设置所有的背景属性，可以在这里设置如下属性：

background-color —— 背景颜色。
background-image —— 使用的背景图像
background-position —— 背景图像的位置
background-size —— 背景图片的大小
background-repeat —— 如何重复背景图像
background-origin —— 背景图片的定位区域
background-clip —— 背景的绘制区域
background-attachment —— 背景图像是否固定或者随着页面的其余部分滚动。

各值之间用空格分隔，不分先后顺序。可以只有其中的某些值，例如 background：＃FF0000 url(img.png)是允许的，但至少有一个值。

建议使用background 简写属性，这样可以更好地兼容较老的浏览器，少写很多代码，当然你也可以分开使用，比如：

background-color: #ff0000;
background-image: url(img.png);
background-repeat: no-repeat;
background-size: 100% auto;

1、背景颜色 —— background-color

background-color 和之前讲的的color 一样，可以使用16进制、rgb、rgba等设置颜色。如下实例：

<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
p.no2 {background-color: gray; padding: 20px;}
</style>
</head>
<body>
<h1>背景色1</h1>
<h2>背景色2</h2>
<p>背景色3</p>
<p class="no2">背景色4</p>
</body>
</html>

如下图显示：

注意：background-color: transparent; 指透明色，不显示任何颜色。

2、背景图片的使用——background-image

给html元素添加背景图片，在早期网页制作中被广泛应用，如今已不建议大量使用。如下实例：

body {background-image:url(/static/bg.gif);}

这里使用了一个125*125大小的图片，如下：

但是你会发现，整个网页铺满了图片，上面的代码默认会铺满整个页面从左到右，从上到下。如果不想被平铺，可以使用background-repeat 设置。

背景图片同时可以设置多个背景图片，如下：

background-image: url(/statics/bg1.gif), url(/statics/bg2.gif);

多个图像以逗号隔开，在页面中多个图片会叠加显示，第一张图片显示在最顶端。

如下效果：

3、背景重复方式 —— background-repeat

它有如下几个属性：

repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像不重复。
inherit	从父元素继承 background-repeat 属性的设置。

实例如下：

4、背景图的位置 —— background-position

背景图片默认显示在左上角，语法如下：

background-position: x y; // x 距离左边距离，y距离顶部距离

如果要改变它的位置，可以使用关键字：top、bottom、left、right 和 center；或者使用长度值，如 100px 或 5cm；也可以使用百分数值。

x 可以取值百分比| 数值| left | center | right。

y 可以取值百分比| 数值| top| center | bottom。

当只设置一个值的时候，另一个会缺省为 center。

使用关键字，将背景图片水平居中，垂直居中：

background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;

使用百分比%：

background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50% 50%;

50% 50% 等同于 center center，显示效果和上图一样。

还可以使用具体数值，比如 px、em、cm等。

background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50px 50px;

显示效果如下：

5、背景图相对于容器的基准点 —— background-origin

就是设置背景图片相对于html元素什么位置作为初始坐标点，语法：

background-origin: padding-box|border-box|content-box;

几种值得含义：

padding-box	背景图像相对填充框的位置
border-box	背景图像相对边界框的位置
content-box	背景图像相对内容框的位置

如下实例：

6、背景图片大小 —— background-size

默认会显示背景图原始尺寸，可以通过此属性设置背景图片在元素上的大小，语法：

background-size: width height;

宽度和高度可以使用数值、百分比%、cover 及 contain ;

数值：可以使用任何单位的数字，比如 px、em、cm等。如果设置一个值，第二个为"auto(自动)"。

百分比%：相对于其所在html原始宽度和高度，如果设置一个值，第二个为"auto(自动)"。

cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

contain：把背景图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

如下示例：

7、背景图像是否固定或者随着页面的其余部分滚动

background-attachment 属性有以下几个值：

scroll	背景图片随页面的其余部分滚动。这是默认
fixed	背景图像是固定的
inherit	指定background-attachment的设置应该从父元素继承
local	背景图片随滚动元素滚动

如设置一个固定的背景图片，不跟随页面滚动：

background-attachment:fixed;

滚动滚动条，会发下背景图片始终固定在屏幕那个位置。

8、背景绘制区域 —— background-clip

语法如下：

background-clip: border-box|padding-box|content-box;

border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box	背景绘制在衬距方框内（剪切成衬距方框）。
content-box	背景绘制在内容方框内（剪切成内容方框）。

这个属性类似于 background-origin ，只不过它会裁剪背景图片，如下示例：

9、背景层的混合模式 —— background-blend-mode

所谓混合模式就是将图片与颜色或图片与图片进行混合，语法：

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

属性值：

示例如下：

正常模式

luminosity 亮度模式

color 颜色模式

其它模式可以自己试试，看下有什么区别。

到此，我们了解了颜色和背景的使用方法，尤其是背景的使用，由于它的属性很多，可以简写也可以分开写，要想完全掌握，还得多练习，每种属性进行组合使用看看其效果。

一般建议使用 background 简写方式，主要是可以少写很多代码。以上介绍难免有误，或不齐全，欢迎指出错误，并补充。

上篇：前端入门——css链接样式

们学习 CSS 背景属性。

假设这里有个 div 容器，宽 400，高 300，默认情况下，这个 div 是没有背景的，或者说它的背景是透明的，我们拿一张图片实验一下就能看得出来，这个 div 在默认情况下，背景是透明的。

也可以给 div 加一个背景颜色。

既然可以设置背景颜色，那么当然也可以给这个 div 设计一个背景图片，就像这样。但是由于这个 div 已经被我设定了大小，图片呢，是大于这个容器的，所以实际上，我们最终看到的效果，是这个样子的。我们只能看到图片的一部分。下面我们就来看看应用 CSS 背景属性如何实现这个效果。

创建一个 css-background.html 文件和一个 background-style.css 文件。接下来，我们打算给整个页面来添加背景图片。

事实上，body 元素也是一个容器，可以直接给 body 添加背景图片。body 容器默认水平方向上，是占满整个窗口的，我们来给它添加一个高度样式，定义选择器 body，声明样式 height: 100%。

CSS
body {
  height: 100%;
}

预览一下效果，按下 F12，来观察一下页面 body 元素的大小，我们发现 body 依然是只有宽度，没有高度。为什么我们设置的高度 100% 不管用呢？大家注意，这里的100%是相对于它的父元素高度的，body 元素的父元素是 html，这个元素我们并没有给它设置大小。

所以，在 body 选择器前面加一个 html 逗号 ( html, )，这样两个元素都设置了高度。让他们的高度和浏览器窗口大小保持一致。

这时再来看一下页面，现在 body 和整个窗口就一样大了。

CSS
html, body {
  height: 100%;
}

下面我们给 body 添加背景图片，可以通过 background-image 属性实现，属性值为 url 后跟一个小括号，括号里面填写背景图片的路径（url(./duck.gif)）。

回到样式代码，再定义一个 body 选择器，单独给它再声明样式 background-image: url(./duck.gif)。这个图片是一个动态图片。

我们来观看一下效果，为什么会出现这么多的图片呢？我明明只是加了一张背景图而已。原因是，当我们给元素添加背景图片的时候，图片是以平铺的方式来展现的。

什么是平铺呢？就是当我们放入一张背景图的时候，这个图片在默认情况下，会向四周扩散，无限的进行重复，就变成了这个样子。当然了，容器是有大小限制的，最终我们能看到的部分呢，也就这么多而已。

如果我们不希望这个背景图是重复的，需要使用一个新的背景属性 background-repeat，取值为 no-repeat。

我们来看效果，最终就只有一张动图了。

接下来我们来修改一下，将背景图片换成另外一张图片。

再来观察这个效果，由于不允许平铺，我们只看到了一张图片。

把 background-repeat 属性值 no-repeat 改为 repeat。

我们就看到了这样的效果。

在平时开发的时候，给一个网页或一个比较大的容器设置背景，经常会采用这样的技巧，放一个小的图片进去，只需要让它保持平铺的方式，我就会得到一张无限大的图。

再回到刚才的例子。如果要求这个背景图片在页面中间显示，我们如何调整背景图的位置呢？

我们需要使用 background-position 属性，这个属性需要写两个值：第一个值表示在水平方向上的对齐方式——left，center，right。第二个值表示在垂直方向上的对齐方式——top，center ，bottom。

给 body 添加样式 background-position: center center，也就是水平垂直居中。

大家发现，图片移到了页面的中间。如果将图片放到右下角，属性值该如何设置呢？把答案写到公屏上吧。

回到 html 代码，添加一个 h1 元素和五个 p 元素，填入一些文本。再复制五份。

再回到 css 代码，背景图恢复为 bg.png，图片平铺方式为 repeat。

我们看一下效果，可以通过滚动条来查看网页内容，仔细观察，文字和背景图片一起滚动。那能否实现文字滚动，背景图片不动呢？大家可以先脑补一下效果。

实现这个效果，需要使用 background-attachment 属性，用来声明容器里的背景图片与内容的依附方式。值 fixed：图片固定，值 scroll：同时滚动。

给 body 选择器添加样式 background-attachment

[əˈtætʃmənt] : fixed。

再看一下效果，滚动一下页面，背景固定的效果实现了！

前面我们多次使用到了 background-color 属性，它可以给容器设置背景颜色，值可以设置为颜色名称，十六进制颜色值，RGB颜色值等等。

把背景图片的样式注释掉，添加 background-color 属性，值为 green。

此时，整个页面背景为绿色！颜色有点深，可以让绿色变的浅一些吗？

你能想到的方法应该是换一个其他的颜色值，其实，我们可以通过让背景透明一些，同样可以实现这个效果。

这需要学习一个新的颜色值表示方法——rgba。这里的 rgb 就是 rgb 颜色值，a 是 alpha 的简写，表示通过设置一个 alpha 通道，来指定颜色的不透明度，是一个介于 0 到 1 的数字。0表示完全透明，1 表示完全不透明。比如 rgba(0, 0, 0, 0.5)，表示的颜色就是黑色半透明。

把 green 颜色名称改为 rgba(0, 255, 0, 0.1)。

我们看，页面绿色的背景因为透明，颜色变浅了！

为了缩短代码，也可以使用单一的 background 来指定所有的背景属性。

可以把 body 的全部背景属性，合并在一个 background 属性里。注释所有代码，声明属性 background，值可以写为：颜色值 rgba(0, 255, 0, 0.1)，背景图片 url(./duck.gif)，平铺方式 no-repeat，背景图位置 right bottom，背景依附 fixed。（rgba(0, 255, 0, 0.1) url(./bg.png) no-repeat right bottom fixed;）

我们看，一句声明，实现了全部的背景效果！

文章配套视频链接： https://www.bilibili.com/video/BV1oU4y1278g/?p=75

在线咨询

上一篇：HTML 简介
下一篇：如何解决Rmd无法编译为HTML的问题？8种常用的解决方法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

css中，background怎样在保证容器没有空余的情况下，占满容器？

言

css 颜色 —— color

css 背景 —— background

您的项目需求