当前位置：网站首页>Background fixing effect

Background fixing effect

2022-06-12 08:40:00 【Little boy who likes hot pot】

1.background-attachment Property to set whether the background image is fixed or scrolling with the rest of the page

（1）background-attachment:scroll The background image is scrolling with the object content

（2）background-attachment:fixed The background image is fixed

2. The background image scrolls with the content of the object

Code ：

<!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> The background is fixed </title>

    <style>
           body{
                 background-image:   url(images/bg.jpg);
                 background-repeat:   no-repeat;
                 background-position:  center top;
                 color: #fff;
                 font-size: 20px;
           }

    </style>
</head>

<body>
           <p> The background is fixed </p>   
           <p> The background is fixed </p>   
           <p> The background is fixed </p>   
           <p> The background is fixed </p>   
           <p> The background is fixed </p>   
           <p> The background is fixed </p> 
           <p> The background is fixed </p> 
           <p> The background is fixed </p> 
           <p> The background is fixed </p> 
           <p> The background is fixed </p> 
           <p> The background is fixed </p> 
           <p> The background is fixed </p> 
           <p> The background is fixed </p> 
           <p> The background is fixed </p> 
           <p> The background is fixed </p> 
           <p> The background is fixed </p> 
           <p> The background is fixed </p> 
           <p> The background is fixed </p> 
           <p> The background is fixed </p> 
           <p> The background is fixed </p> 
           <p> The background is fixed </p> 
</body>

</html>

Running effect ： Content and picture move at the same time

 3. Fixed background image 

<!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> The background is fixed </title>

    <style>
           body{
                 background-image:   url(images/bg.jpg);
                 background-repeat:   no-repeat;
                 background-position:  center top;
                 /*  Fix the background picture  */
                 background-attachment: fixed;
                 color: #fff;
                 font-size: 20px;
           }

    </style>
</head>

<body>
           <p> The background is fixed </p>   
           <p> The background is fixed </p>   
           <p> The background is fixed </p>   
           <p> The background is fixed </p>   
           <p> The background is fixed </p>   
           <p> The background is fixed </p> 
           <p> The background is fixed </p> 
           <p> The background is fixed </p> 
           <p> The background is fixed </p> 
           <p> The background is fixed </p> 
           <p> The background is fixed </p> 
           <p> The background is fixed </p> 
           <p> The background is fixed </p> 
           <p> The background is fixed </p> 
           <p> The background is fixed </p> 
           <p> The background is fixed </p> 
           <p> The background is fixed </p> 
           <p> The background is fixed </p> 
           <p> The background is fixed </p> 
           <p> The background is fixed </p> 
           <p> The background is fixed </p> 
</body>

</html>

Running effect ： Only the content is moving , Background picture does not move

原网站

版权声明
本文为[Little boy who likes hot pot]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/03/202203010547378842.html

边栏推荐

猜你喜欢

随机推荐