背景固定效果

最新推荐文章于 2023-10-12 14:19:53 发布

爱吃火锅的小boy

最新推荐文章于 2023-10-12 14:19:53 发布

阅读量336

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/weixin_42900834/article/details/123031853

版权

1.background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动

（1）background-attachment:scroll 背景图像是随对象内容滚动

（2）background-attachment:fixed 背景图像固定

2.背景图像随着对象内容滚动

代码：

<!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(images/bg.jpg);
                 background-repeat:   no-repeat;
                 background-position:  center top;
                 color: #fff;
                 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> 
</body>

</html>

运行效果：内容和图片同时动

3.固定背景图像

<!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(images/bg.jpg);
                 background-repeat:   no-repeat;
                 background-position:  center top;
                 /* 把背景图片固定住 */
                 background-attachment: fixed;
                 color: #fff;
                 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> 
</body>

</html>

运行效果：只有内容在动，背景图片不动

爱吃火锅的小boy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
背景固定效果

1.background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动（1）background-attachment:scroll 背景图像是随对象内容滚动（2）background-attachment:fixed 背景图像固定2.背景图像随着对象内容滚动代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l
复制链接

扫一扫