背景

背景相关的样式属性：

• background-color 设置背景颜色的属性。

• background-image 设置背景图片的属性。

  • 如果背景图片大小小于元素，则背景图片会自动在元素中平铺将元素铺满；
  • 如果背景图片大小大于元素，则背景图片一部分会无法完全显示；
  • 如果背景图片大小等于元素，则背景图片会直接正常显示；

• background-repeat 设置背景图片的重复方式：

  • repeat ：默认值，背景图片沿着 x 轴和 y 轴双方向重复；
  • repeat-x ：背景图片沿着 x 轴方向重复；
  • repeat-y ：背景图片沿着 y 轴方向重复；
  • no-repeat ：背景图片不重复；

• background-position 设置背景图片的位置 ：

  • 通过 top left right bottom center 几个表示方位的词来设置背景图片的位置：使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是 center；
  • 通过偏移量来指定背景图片的位置：水平方向偏移量、垂直方向变量；

• background-clip 设置背景的范围：

  • border-box ：默认值，背景会出现在边框的下边；
  • padding-box ：背景不会出现在边框，只出现在内容区和内边距；
  • content-box ：背景只会出现在内容区；

• background-origin 背景图片的偏移量计算的原点：

  • border-box ：背景图片的变量从边框处开始计算；
  • padding-box ：默认值， background-position 从内边距处开始计算；
  • content-box ：背景图片的偏移量从内容区处计算；

• background-size 设置背景图片的大小：

  • 第一个值表示宽度，第二个值表示高度；如果只写一个，则第二个值默认是 auto ；
  • cover ：图片的比例不变，将元素铺满；
  • contain ：图片比例不变，将图片在元素中完整显示；

• background-attachment 背景图片是否跟随元素移动 ：

  • scroll ：默认值，背景图片会跟随元素移动；
  • fixed ：背景会固定在页面中，不会随元素移动；

🌰 例子：

backgound 背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置并且该样式没有顺序要求，也没有哪个属性是必须写的；

⚠️ 简写时的注意事项：

• background-size 必须写在 background-position 后，使用 / 隔开；
• background-origin background-clip 两个样式， orgin 要在 clip 的前边；

渐变

线性渐变 linear-gradient ：（表示渐变的方向）

• to left
• to right
• to bottom
• to top
• deg 表示度数 (单位为 deg )
• turn 表示圈

{
  background-image: linear-gradient(to left, red, yellow);
	background-image: linear-gradient(to right, red, yellow);
	background-image: linear-gradient(to top, red, yellow);
	background-image: linear-gradient(to bottom, red, yellow);
}

径向渐变 radial-gradient ：

​ 可以设定形状、位置、大小 …

🌰 例子：