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;