CSS background-attachment 背景图片固定效果

Devops海洋的渔夫

发布于 2019-06-02 05:39:00

1.2K00

代码可运行

文章被收录于专栏：Devops专栏Devops专栏

运行总次数：0

代码可运行

background-attachment 设置背景图片是固定还是随着页面滚动条滚动

当给页面body设置背景图片，背景图片默认是随着滚动条下拉而滚动的。下面写一个示例看看，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            background-image: url(meinv.jpg);
        }

        p{
            width: 100px;
            height: 1000px;
            margin: 50px auto;
            font-size: 18px;
            color: red;
        }
    </style>
</head>
<body>
    <!-- (p{段落内容$})*7 -->
    <p>段落内容1</p>
    <p>段落内容2</p>
    <p>段落内容3</p>
    <p>段落内容4</p>
    <p>段落内容5</p>
    <p>段落内容6</p>
    <p>段落内容7</p>
</body>
</html>