CSS从入门到精通——背景样式（续）

最新推荐文章于 2025-03-19 20:34:28 发布

原创最新推荐文章于 2025-03-19 20:34:28 发布 · 1.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css背景样式

前端开发专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了CSS背景属性的设置方法，包括使用关键字、百分比和长度值定位背景图像，以及如何使背景图像固定不随页面滚动。同时，还介绍了如何使用简写属性简化背景设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

显示效果如图：

本例中，设置right top代表放置在元素内边距区的右上角。

对于具体位置，大家可以使用如下关键字的组合：

属性值
`top left`
`top center`
`top right`
`center left`
`center center`
`center right`
`bottom left`
`bottom center`
`bottom right`

如果值定义了一个关键词，那么第二个值将是”center”。当然也可以使用百分比和长度值，现在只作为了解。

背景关联

当页面较长时，滚动页面，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。如果想要背景图像不随页面滚动而改变位置。可以使用background-attachment属性，将其值设置为fixed。

body {
    background-image: url("https://www.educoder.net/attachments/download/211104");
    background-repeat: no-repeat;
    background-attachment: fixed;
}

简写背景

从上面的实例中，大家学习了多种背景属性的设置，为了简化这些属性的书写，我们可以将这些属性合并在同一个属性中。

例如：

body {
    background:#ffffff url("./Assert/sun.jpg") no-repeat right top;
}

使用简写属性时，属性值的顺序为：

background-color
background-image
background-repeat
background-attachment
background-position

以上属性无需全部使用，大家可以按照页面设置使用。