CSS BackGround 属性指南

CSS　BackGround　属性指南
将CSS中background的各个属性及其对应的值。简写学习方法。

目录

• background
• background-image
• background-size
• background-repeat
• background-position
• background-origin
• background-clip
• background-attachment
• background-color
总结

CSS背景(background)属性
CSS背景(background)属性让我们可以控制图像的大小和属性，我们可以以不同大小的屏幕制作响应性强的图像。也就是创建响应式网页。

CSS中的background-image属性
以下语法：

// 图片路径
.container{
    background-image: url();
}

通过两种方法使用background-image
通过图像的路径
直接填写文件名
通过具体的图像URL
也就是在URL中填写地址

设置大小和停止图像拉伸
background-size : contain;
background-repeat : no-repeat;
CSS中的background-size属性
例子

// 自动适应
	.container{
    background-size: cover;
	}

有三种使用方法
使用 Cover/Contain 值
设置图像宽度和高度
使用 auto
cover 和 contain 的特点
cover：调整窗口大小的时候，会把图像拉伸到整个屏幕。

contain：调整窗口大小，它的值不会发生改变。
图像宽度和高度
这里考到宽度和高度
background-size: 200px 200px;
auto，图像会保持原来大小，不会随调整窗口大小改变。

CSS中的background-repeat属性
以下语法：

// 图片位置
 .container{
  background-repeat: repeat;
 }

共有6个值
Repeat
Repeat-X
Repeat-Y
No-repeat
Space
Round

Repeat值
使用这个值，我们可以沿用X轴和Y轴重复对应画面多次，直到容器被填充满。

Repeat-X值
使用这个值，容器X轴上重复对应图像，直到X轴被填充满

Repeat-Y值
使用这个值，容器Y轴上重复对应图像，直到Y轴被填充满

No-repeat值
使用这个值，可以禁止图像重复

Space值
使用这个值，对X轴和Y轴都起作用。

Round值
使用这个值，对X轴和Y轴都起作用，在调整窗口大小时注意图像拉伸。注意调整窗口大小，有空的空间。

CSS中的background-position属性

// 更改图片显示位置
 .container{
  background-position: 200px 200px;
        }

还可以使用下面的值组合
Top
Left
Right
Bottom
Percentage values

CSS中的background-clip属性

// 背景的裁剪区域
 .container{
  background-clip: border-box;
        }

确定背景的裁剪区域
其三个值分别为:
Border-box (背景被裁剪到边框盒)
Padding-box (背景被裁剪到内边距框)
Content-box (背景被裁剪到内容框)

CSS中的background-attachment属性
这个属性允许我们在滚动时控制内容和图像的行为

// 滚动时控制内容和图像的行为
.container{
 background-attachment: scroll;
        }

以下三个值
Scroll
Fixed
Local
其中使用scroll时，像会随着页面的滚动而滚动（这是默认的）。使用 fixed 时图像不会随着页面其余部分的滚动而移动，在屏幕中是固定的。而 local 会随着元素内容的滚动而滚动，直到滚动到内容结束。

CSS中的background-color属性

// 背景颜色
.container{
        background-color: aqua;
      }

使用这个属性填充背景颜色，使用较多的三个值，通过名称或者十六进制值对应颜色，使用RGB()颜色函数，使用linear-gradient()函数，使用名称设置纯色背景

// 纯色背景
 .container{
background-color: red;   
height: 100vh;
      }

也可以，使用十六进制来设置颜色

// 十六进制设置颜色
 .container{
background-color: #fff;   
height: 100vh;
      }

还可以使用RBG()函数设置背景颜色

// RBG()函数设置背景颜色
.container{
background-color: rgb(red, green, blue);
height: 100vh;
      }

还可以使用RBGA()函数设置背景颜色和透明度

// Opacity：0.6是60%透明度
  .container{
background-color: rgba(red, green, blue, 0.6);
     height: 100vh;
      }

最后可以通过多种颜色的组合完成一个渐变色，使用rgb(24, 250, 242)左边的颜色，#b42dfd右边的颜色。45deg通过两种颜色的梯度创建一个渐变。

// An highlighted block
   .container{
      background: linear-gradient(45deg,rgb(24, 250, 242),#b42dfd);
      height: 100vh;
      }

总结
作者的一些平时总结希望对你能有所帮助，也希望指认错误，如有侵权联系必删。