CSS3 背景学习笔记

CSS3 提供了强大的背景属性，允许我们制作出各种各样的视觉效果。在本文中，我们将介绍一些常用的 CSS3 背景属性以及它们的实际应用。

背景颜色

使用 background-color 属性可以设置元素的背景颜色。例如，下面的代码将页面的背景颜色设置为灰色：

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

背景图片

通过使用 background-image 属性可以设置元素的背景图片。例如，下面的代码将页面的背景图片设置为 bg.jpg：

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

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

• repeat: 默认值，背景图片在水平和垂直方向上重复；
• repeat-x: 背景图片在水平方向上重复；
• repeat-y: 背景图片在垂直方向上重复；
• no-repeat: 背景图片不重复。

例如，下面的代码将页面的背景图片只在水平方向上重复：

cssCopy Code
body {
    background-image: url(bg.jpg);
    background-repeat: repeat-x;
}

背景位置

使用 background-position 属性可以设置背景图片的位置。例如，下面的代码将页面的背景图片向左上角偏移：

cssCopy Code
body {
    background-image: url(bg.jpg);
    background-position: left top;
}

可以使用百分比值或具体像素值来设置背景图片的位置。例如，下面的代码将页面的背景图片向右下角偏移 50px：

cssCopy Code
body {
    background-image: url(bg.jpg);
    background-position: 100% 100%;
    padding: 50px; /* 避免内容被背景图片遮挡 */
}

背景缩放

使用 background-size 属性可以设置背景图片的大小。例如，下面的代码将页面的背景图片调整为宽度为 200px，高度自适应：

cssCopy Code
body {
    background-image: url(bg.jpg);
    background-size: 200px auto;
}

背景渐变

通过使用 background-image 和 linear-gradient() 函数可以设置背景渐变。例如，下面的代码将页面的背景设置为从上到下渐变的红色和蓝色：

cssCopy Code
body {
    background-image: linear-gradient(to bottom, red, blue);
}

同样地，我们也可以设置径向渐变。例如，下面的代码将页面的背景设置为从中心向外渐变的红色和蓝色：

cssCopy Code
body {
    background-image: radial-gradient(red, blue);
    background-position: center center;
    background-size: cover;
}

以上就是 CSS3 背景属性的一些常用应用，希望能对您有所帮助。