Suddenly found that background-attachment:scroll didn't work.

background-attachment:scroll
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            -sharptest{
                width: 400px;
                height: 400px;
                background-image:url(https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1170950161,2411404899&fm=173&app=25&f=JPEG?w=218&h=146&s=11E441A7520B2CE46C8C0DB90300E013);
                background-repeat:no-repeat ;
                background-attachment:scroll ;
                overflow: auto;
            }
        </style>
    </head>
    <body>
        <div id="test">
            1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>
        </div>
    </body>
</html>
Css
Sep.04,2021

is not fixed?


change it to: background-attachment: local;

most of this problem can be blamed on w3school. Generally, the css attribute is found in his home manual or a variety of logo copies of his home. However, they left out the local attribute and did not write it on it. I was puzzled by this problem before, until one day I saw another one in the book: local.

.

this is not designed intentionally by bug,css. The following blog wrote a special article about this phenomenon:
blog posts here

Menu