CSS Backgrounds(背景)学习笔记

在 CSS 中，通过 background 属性可以设置元素的背景样式。在本文中，我们将学习如何使用 background 属性来设置元素的背景色、背景图片以及背景的重复、定位等属性。

设置背景色

要设置元素的背景色，可以使用 background-color 属性：

cssCopy Code
body {
  background-color: #f8f8f8;
}

上面的代码将 body 元素的背景色设置为浅灰色。

设置背景图片

要设置元素的背景图片，可以使用 background-image 属性：

cssCopy Code
body {
  background-image: url('example.jpg');
}

上面的代码将 body 元素的背景设置为 example.jpg 图片。

背景重复

当背景图片比元素大时，可以使用 background-repeat 属性来控制图片的重复方式。

cssCopy Code
body {
  background-image: url('example.jpg');
  background-repeat: no-repeat;
}

上面的代码将 body 元素的背景设置为 example.jpg 图片，并设置为不重复。

背景定位

通过 background-position 属性可以控制背景图片的位置。下面是一些常见的值：

cssCopy Code
body {
  background-image: url('example.jpg');
  background-position: center;
}

上面的代码将 body 元素的背景图片居中对齐。

实例

下面是一个完整的示例，展示了如何同时设置背景颜色和背景图片：

cssCopy Code
body {
  background-color: #f8f8f8;
  background-image: url('example.jpg');
  background-repeat: no-repeat;
  background-position: center;
}

上面的代码将 body 元素的背景设置为浅灰色，同时使用 example.jpg 图片作为背景，不重复，并居中对齐。

结论

CSS 的背景属性非常强大，在实现不同的设计效果时可以发挥出巨大的作用。使用上述属性可以轻松地实现各种不同的背景效果。