如何设置CSS的背景图片和颜色

小蓝 • 2024-12-12 12:43 • 编程

一、背景图片设置大小Css

CSS提供了多种方式来设置背景图片以及图片的大小，下面将列举其中的几种方式。

1. background-image属性

CSS通过background-image属性来设置背景图片，如下所示：

body {
  background-image: url("/images/background.jpg");
}

其中，url(“/images/background.jpg”)为背景图片的路径。

2. background-size属性

CSS通过background-size属性来设置背景图片的大小，如下所示：

body {
  background-image: url("/images/background.jpg");
  background-size: cover;
}

其中，cover为背景图片的大小类型，它会将背景图片等比例放大或缩小，在保持图片比例的前提下，尽可能覆盖整个容器。

3. background-repeat属性

CSS通过background-repeat属性来设置背景图片不重复或重复显示，如下所示：

/* 不重复显示 */
body {
  background-image: url("/images/background.jpg");
  background-repeat: no-repeat;
}

/* 垂直重复显示 */
body {
  background-image: url("/images/background.jpg");
  background-repeat: repeat-y;
}

/* 水平重复显示 */
body {
  background-image: url("/images/background.jpg");
  background-repeat: repeat-x;
}

/* 水平垂直都重复显示 */
body {
  background-image: url("/images/background.jpg");
  background-repeat: repeat;
}

其中，no-repeat表示不重复显示，repeat-y表示垂直重复显示，repeat-x表示水平重复显示，repeat表示水平垂直都重复显示。

二、背景颜色设置Css

CSS提供了多种方式来设置背景颜色，下面将列举其中的几种方式。

1. background-color属性

CSS通过background-color属性来设置背景颜色，如下所示：

body {
  background-color: #f6f6f6;
}

其中，#f6f6f6为背景颜色的值，可以使用十六进制、RGB值、颜色名称等来表示颜色。

2. background属性

CSS通过background属性来设置背景颜色，它可以一次性设置背景颜色、图片、大小等多个属性，如下所示：

body {
  background: #f6f6f6 url("/images/background.jpg") no-repeat center center fixed;
}

其中，#f6f6f6为背景颜色的值，url(“/images/background.jpg”)为背景图片的路径，no-repeat表示不重复显示，center center表示水平垂直居中显示，fixed表示背景图片随滚动条滚动。

三、小结

本文介绍了CSS如何设置背景图片和颜色，内容涵盖了背景图片的大小设置、颜色的设置、以及通过background属性一次性设置多个属性等。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/241700.html