CSS背景属性详解-优快云博客

本文链接：https://blog.youkuaiyun.com/actionActivity/article/details/90451809

这篇博客详细介绍了CSS背景属性，包括background-color、background-img、background-repeat、background-position和background-attachment等，以及CSS3新增的background-size、background-origin、background-clip和背景简写属性。内容覆盖了背景颜色、图片设置、图片重复方式、定位和图片固定等概念，是学习CSS背景样式的重要参考资料。

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

文章目录

background-color

background-color 设置背景颜色

background-img

background-img 设置背景图片

语法：background-img:url(图片的相对路径)
- 如果背景图片大于元素大小，默认会显示图片的左上角。
- 如果背景图片和元素一样大，则会将背景图片全部显示。
- 如果背景图片小于元素大小，则会默认将背景图片以平铺的方式充满元素。
可以同时为一个元素指定背景图片和背景颜色，这样背景颜色将会作为背景图片的底色。
一般情况下设置背景图片时，都会指定一个背景颜色。

<style>
    .box {
        width: 3000px;
        height: 1000px;
        background: url("bg-1.jpg");
    }
</style>

<body>
    <div class="box"></div>
</body>

background-repeat

background-repeat用于设置背景图片的重复方式

可选值
- repeat：双方向重复
- no-repeat：背景图片不会重复，有多大就显示多大。
- repeat-x：背景图片水平方向重复。
- repeat-y: 背景图片垂直方向重复。

background-repeat: no-repeat;

不平铺

background-repeat: repeat-x;

在这里插入图片描述

background-repeat: repeat-y;

在这里插入图片描述

background-position

background-position设置背景图片在元素中的位置
可选值：

该属性可以使用 top、left、right、bottom、center 中的两个值来指定一个背景图片的位置

例如：
top,left表示左上
bottom,right表示右下
centet,center表示居中

如果只给出一个值，第二个值默认是 center。

background-position: center;

在这里插入图片描述

也可以直接指定2个偏移量

第一个值是水平偏移量，
- 如果指定一个正值，则向右移动指定的像素。
- 如果指定一个负值，则向左移动指定的像素。
第二个值是垂直偏移量。
- 如果指定一个正值，则向下移动指定的像素。
- 如果指定一个负值，则向上移动指定的像素。

<style>
    .box {
        width: 1000px;
        height: 1000px;
        background: url("bg-1.jpg");
        background-color: deeppink;
        background-repeat: no-repeat;
        background-position: 100px 100px;
    }
</style>

<body>
    <div class="box"></div>
</body>

在这里插入图片描述

background-position: -100px -100px;

在这里插入图片描述

background-attachment

background-attachment用来设置背景图片是否随页面一起滚动。

可选值：
scroll：默认值，背景图片随着窗口滚动。
fixed：背景图片会固定在某一位置，不随页面滚动。
当背景图片的设置为 fixed 时，背景图片的定位永远相对于窗口。
不随窗口滚动的图片，一般都会设置给 body，而不设置给其他元素。

<style>
	.body{
	height:5000px;
	}
    .box {
        width: 1000px;
        height: 5000px;
        background: url("bg-1.jpg");
        background-color: deeppink;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
</style>

<body>
    <div class="box">填充内容</div>
</body>