HTML中背景的设置

在之前的HTML学习中我们知道了，对于背景颜色，我们可以使用

background-color 属性来完成，但在实际应用上，单调独一的背景颜色往往难以受众，因此，单独使用background-color肯定是不行的。

渐变色

在实际使用中，如图这样的渐变色背景，往往更容易被受用。

渐变色背景的实现提供 background 属性来实现

首先定义 background 添加颜色变化方法linear-gradient 具体如下：

background: linear-gradient(to right, #95ca47, #4dc891);

渐变方向使用语义化英文实现。

如下

  • to right / to left 向右/向左渐变
  • to top / to bottom 向上/向下渐变
  • to right bottom / to right top 向右下/向右上渐变
  • to left bottom / to left top 向左下/向左上渐变
  • xxxdeg xxx 范围（0 到 360） 更精确的渐变方向

渐变也可以不单单从头到尾进行渐变，如下图效果

每个颜色之后跟上一个百分比 （PX值），来表示变色的起止位置，如上图的意思即为 在30%~70%之间进行颜色渐变。

当然这种只是最基础的颜色渐变，更为复杂的颜色渐变请参考

|MDN的CSS渐变指南|

背景图片

在设置背景的时候，我们不可不免也需要使用图片作为背景。

此时我们就需要 background-image 属性来添加背景图片。

具体使用为 background-image: url(图片URL地址);

注意的是，这里的地址不需要使用双引号括住。

当图片大小不足以囊括整个页面时，HTML默认多次复制图片来填充页面，但如果使用 background-repeat: no-repeat;则不会存在重复图片。

当然 background-repeat 也有多个值：

值作用
repeat默认值，如果图片比容器小，则在垂直、水平方向都进行重复
repeat-x只在水平方向重复
repeat-y只在垂直方向重复
no-repeat不发生重复

背景图片位置 background-position

如 background-position: center 效果为图片居中显示

而 background-position 也拥有值

值说明
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right		左侧两个元素为一组一起出现，分别代表垂直和水平布局
比如：
background-position: top left; 效果等于
background-position-x: left;
background-position-y: top;
如果只写一个关键词，那么另一个关键词默认是center
x% y%第一个值是水平位置，第二个值是垂直位置。
左上角是 0% 0%。右下角是 100% 100%。如果只写一个值，另一个值将是 50%。
xpx ypx第一个值是水平位置，第二个值是垂直位置。
左上角是 0 0，单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果只写一个值，另一个值将是50%

background-size 背景图片大小

值说明
cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
xpx ypx自定义设置高度和宽度
x% y%相对于容器百分比设置高度、宽度

background 存在简便写法

background 后连续跟随多个背景属性值，如果没有此属性，则置空。如使用 background-image,background-repeat,background-position,background-size则可以写成

background: url(图片URL) no-repeat center / contain;