3.5背景图像固定（背景附着）

最新推荐文章于 2022-09-23 13:59:29 发布

这一片月

最新推荐文章于 2022-09-23 13:59:29 发布

阅读量324

点赞数

分类专栏： css样式文章标签： css

本文链接：https://blog.csdn.net/qq_62865634/article/details/126688653

版权

css样式专栏收录该内容

41 篇文章 1 订阅

订阅专栏

提示：background-attachment属性设置背景图像是否固定或者随着页面其余部分滚动、两属性值，scroll图片跟着内容一起滚动、fixed图片固定内容滚动。

1、语法：

div{

background-attachment：scroll；

}

解释：

scroll 背景图片跟随对象内容滚动

fixed 背景图像固定

自己代码展示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图像固定</title>
    <style>
        body {
            background-image: url(wzbj.jpg);
            /* 这个表示图片背景 */
            background-repeat: no-repeat;
            /* 这个表示平铺背景 */
            background-position: center top;
            /* 这个表示图片位置：属性值用是方向、还有两不一样的属性值一个是精准位置、另一个是混合位置 */
            /* background-attachment: scroll; */
            /* 这个表示“background-attachment”表示图片附着背景
            两属性值：
            第一个是：scroll表示背景跟内容一起滚动
            另一个是:fixed 表示背景固定内容在滚动 */
            background-attachment: fixed;
            color: azure;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>
    <p>你好呀！小猪佩奇</p>




</body>

</html>

结果显示：