CSS background全部汇总

概述

CSS中的background属性用于设置HTML元素的背景，包括颜色、图片、位置、重复性、尺寸、是否固定等等。它是一个非常重要的属性，不仅可以设置多种效果，而且可以提高网站的美观度和用户体验。

基本语法

background属性可以写在一个指定样式表（CSS）中，也可以作为一个内联样式写在HTML标签元素中。

具体的语法：

background: [颜色] url([图片]) [位置] / [尺寸] [重复] [固定];

此外background还有以下的简化语法：

background-color: [颜色]; /*设置元素的背景颜色*/
background-image: url([图片]); /* 为元素设置背景图像*/
background-repeat: no-repeat; /*设置元素的背景图像是否重复，默认是repeat */
background-position: center; /*设置元素的背景图像位置，默认居中*/

颜色设置

可以选择以下方式设置颜色：

• 颜色名称：例如，red、green等
• 十六进制：例如#FF0000、#00FF00等
• RGB值：例如rgb(255, 0, 0)、rgb(0, 255, 0)等

示例代码：

body {
  background-color: #E9E9E9; /*使用十六进制设置背景颜色*/
}

图片设置

图片可以通过url()来链接到指定的文件路径或者外部链接，示例代码如下：

body {
  background-image: url("../img/background.jpg"); /*使用指定路径的图片作为背景*/
}

位置设置

可以通过background-position属性来设置背景图片的位置，例如：

body {
  background-position: center; /*将背景图片设置在页面中央*/
}

还可以设置水平和竖直方向上的位置，例如：

body {
  background-position: right bottom; /*将背景图片设置在页面的右下角*/
}

尺寸设置

通过background-size属性可以指定背景图片的大小，可以设置具体的像素值，百分比等等。

例如，设置图片大小为100px *100px

body {
  background-size: 100px 100px;
}

重复设置

可以通过background-repeat属性来设置背景图片的重复方式。常见的值有：

• no-repeat：图片不重复，并在页面中居中显示
• repeat-x：水平方向上重复图片
• repeat-y：竖直方向上重复图片
• repeat： 在水平和竖直方向上都重复图片

示例代码：

body {
  background-repeat: no-repeat; /*设置不重复并居中显示图片*/
}

固定设置

背景图片可以通过background-attachment属性设置是否跟随页面滚动。常见的值有：

• fixed： 背景图片随页面滚动而固定不变
• scroll： 背景图片跟随页面滚动而移动

例如，代码示例：

body {
  background-attachment: fixed; /*设置背景图片固定不变*/
}

总结

以上是background属性的全部使用方式，您可以根据实际情况进行设置。通过合适地使用background属性，我们可以营造出更加强烈的视觉效果，使得网站更加美观且易于用户使用。