CSS的背景（第十课）

五寸执念*

已于 2024-10-09 21:15:53 修改

阅读量277

点赞数 6

分类专栏：前端文章标签： css 前端

于 2024-10-09 19:33:26 首次发布

本文链接：https://blog.csdn.net/2302_76722613/article/details/142686491

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

通过css背景属性，可以給页面元素添加背景样式，背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等

1、背景颜色

语法规范：background-color：颜色值;

例如：默认值为transparent（透明的）

div {
            background-color: red;
        }

2、背景图片

语法规范：background-image：none | url（url）

例如：none为默认的无背景图片，url是使用绝对或相对地址指定背景图片；

    <style>
        div {
            width: 300px;
            height: 300px;
            background-image: url(./picture/css综合案例9.29.jpg);
        }
    </style>
<body>
    <div></div>
</body>

3、背景平铺

语法规范：background-repeat：repeat | no-repeat | repeat-x | repeat-y

例如：默认情况是平铺的

    <style>
        div {
            width: 300px;
            height: 300px;
            background-image: url(./picture/css综合案例9.29.jpg);
            /* background-repeat: no-repeat; */
            /* background-repeat: repeat-x; */
            background-repeat: repeat-y;

        }
    </style>
<body>
    <div></div>
</body>

ps：背景图片会压住背景颜色。

4、背景图片位置

语法规范：background-position：x y

参数值	说明
length	百分数 \| 由浮点数字和单位标识符组成的长度值
position	top \| center \| bottom \| left \| center \| right 方位名词 \|\| 精确单位（第一个一定是x，第二个一定是y）\|\| 混合单位也可（方位名词和精确单位混合使用）

例如：

    <style>
        div {
            width: 500px;
            height: 500px;
            background-color: red;
            background-image: url(./picture/css综合案例9.29.jpg);
            background-position: right;
        }
    </style>
</head>

<body>
    <div></div>
</body>

综合案例（背景方位名词的应用）

    <style>
        h3 {
            width: 128px;
            height: 30px;
            /* background-color: pink; */
            font-weight: normal;
            line-height: 30px;
            font-size: 14px;
            background-image: url(./picture/login.webp);
            background-repeat: no-repeat;
            background-position: left center;
            text-indent: 2.5em;

        }
    </style>
</head>

<body>
    <h3>成长守护平台</h3>
</body>

    <style>
        body {
            background-image: url(./picture/bannerImage.webp);
            background-repeat: no-repeat;
            background-position: 10% top;
        }
    </style>
</head>

<body>
</body>

5、背景图像固定

语法规范：background-attachment：scroll | fixed

参数	作用
scroll	背景图像随对象内容滚动
fixed	背景图像固定，不随文字滚动

    <style>
        body {
            color: aquamarine;
            background-repeat: no-repeat;
            background-image: url(./picture/bannerImage.webp);
            background-attachment: fixed;
        }
    </style>

背景颜色复合写法

把所有属性同写在一个属性background中

语法规范：background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置;

<style>
    body {
        background: transparent url(./picture/bannerImage.webp) no-repeat fixed top;
    }
</style>

6、背景色半透明

语法规范：background：rgba(0,0,0,0);

    <style>
        div {
            height: 60px;
            width: 50px;
            background: rgba(0, 0, 0, 0.3);
        }
    </style>

综合案例（五彩导航栏）

    <style>
        .nav a {
            display: inline-block;
            width: 120px;
            height: 58px;
            background-color: pink;
            text-align: center;
            line-height: 48px;
            text-decoration: none;
            color: aliceblue;
        }

        .nav .background1 {
            background: url(./五彩导航栏1) no-repeat;
        }

        .nav .background1:hover {
            background-image: url(./五彩导航栏2);
        }

        .nav .background2 {
            background: url(./五彩导航栏2) no-repeat;
        }

        .nav .background2:hover {
            background-image: url(./五彩导航栏1);
        }

        .nav .background3 {
            background: url(./五彩导航栏3) no-repeat;
        }

        .nav .background3:hover {
            background-image: url(./五彩导航栏4);
        }

        .nav .background4 {
            background: url(./五彩导航栏4) no-repeat;
        }

        .nav .background4:hover {
            background-image: url(./五彩导航栏3);
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#" class="background1">五彩导航栏</a>
        <a href="#" class="background2">五彩导航栏</a>
        <a href="#" class="background3">五彩导航栏</a>
        <a href="#" class="background4">五彩导航栏</a>
    </div>
</body>