css入门（六）—— 背景样式

最新推荐文章于 2025-04-30 20:17:23 发布

少年闲客

最新推荐文章于 2025-04-30 20:17:23 发布

阅读量278

点赞数

分类专栏： css

本文链接：https://blog.youkuaiyun.com/weixin_40633131/article/details/104299280

版权

css 专栏收录该内容

10 篇文章

订阅专栏

本文深入讲解CSS中的背景样式设置，包括背景颜色、背景图像的设置方法及属性详解，如background-color、background-image、background-repeat、background-position和background-attachment等。

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

A. 背景样式主要包括背景颜色和背景图像。
B. 背景颜色使用background-color属性设置。
C. 背景图像包括：
        background-image：定义背景图像的路径，这是设置背景的必要属性
        background-repeat：定义背景图像的显示方式（纵向平铺、横向平铺等）
        background-position：定义背景图像的显示位置（相对于元素）
        background-attachment：定义背景图像是否随内容而滚动
1. 背景颜色，background-color属性
    A. 该属性值可以设置为关键字（red、green等），也可以设置为rgb数值（#3EF0A4）。
2. 背景图像
    2.1. background-image属性
     A. 必要属性，格式为background-image: url("xxx")，支持绝对路径和相对路径。
     B. 要手动设置background-image所在元素的width和height属性，也即是说元素不会自适应。
     e.g. <head>
            <title>background-image属性</title>
            <style type="text/css">
                #kobe {
                    height: 492px;
                    width: 500px;
                    background-image: url("kobe.png");
                }
            </style>
        </head>

        <body>
            <p id="kobe">KOBE</怕>
        </body>
    2.2. background-repeat属性
     A. 设置背景图像是否平铺以及如何平铺（平铺就是重复显示，不是拉伸）
     B. 该属性可以取如下值：
        no-repeat：不平铺
        repeat：在水平方向（x轴）和垂直方向（y轴）同时平铺，默认值
        repeat-x：在水平方向（x轴）平铺
        repeat-y：在垂直方向（y轴）平铺
    2.3. background-position属性
     A. 这个属性只能应用于块元素和替换元素，替换元素包括img、input、textarea、select和object。
     B. 该属性值可以设置为关键字，也可以设置为两个像素值（”20px 30px“），设置为关键字时表示背景图像相对于元素的左上角的距离（分别是水平距离和垂直距离）。
     C. 该属性值可取的关键字为：
        top left：左上（表示图像位于元素的左上角，下面的类似）
        top center：靠上居中
        top right：右上
        left center：靠左居中
        center center：正中
        right center：靠右居中
        bottom left：左下
        bottom center：靠下居中
        bottom right：右下
    2.4. background-attachment属性
     A. 设置背景图像是随元素滚动还是固定不动，该属性值可取的关键字如下：
        scroll：背景图像随元素滚动
        fixed：背景图像固定不动，只有其他元素随着滚动条滚动