HTML中背景的设置
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%之间进行颜色渐变。
当然这种只是最基础的颜色渐变，更为复杂的颜色渐变请参考
背景图片
在设置背景的时候，我们不可不免也需要使用图片作为背景。
此时我们就需要 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 lefttop centertop rightcenter leftcenter centercenter rightbottom leftbottom centerbottom 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;腾讯云开发者
