关于使用css 如何指定一个固定的背景图像

最新推荐文章于 2024-06-14 11:43:35 发布

C_I _Y

最新推荐文章于 2024-06-14 11:43:35 发布

阅读量277

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_44264417/article/details/122436515

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

今天在逛 b 站的时候发现一个特别有意思的css 样式，之前我是没去使用过的，所以我觉得是比较有意思的

`background-attachment`

使用的是 css 里面的 background-attachment

属性：

值	描述
scroll	背景图片随着页面的滚动而滚动，这是默认的。
fixed	背景图片不会随着页面的滚动而滚动
local	背景图片会随着元素内容的滚动而滚动。

使用 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>
        *{
            margin: 0;
            padding: 0;
        }
        #app{
            width: 100%;
        }
        .item{
            width: 1000px;
            height: 1000px;
            background-color: #000;
            margin: 0 auto;
        }
        .client{
            width: 1000px;
            height: 1000px;
            background-color: #fff;
            margin: 0 auto;
            background-image: url(./img/beijing5.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="item"></div>
        <div class="client"></div>
        <div class="item"></div>

    </div>
    </script>
</body>
</html>

最后

因为没有录制视频的插件，所以没贴上效果图，大家可以复制代码到自己的demo里面尝试一下

C_I _Y

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于使用css 如何指定一个固定的背景图像

前言今天在逛 b 站的时候发现一个特别有意思的css 样式，之前我是没去使用过的，所以我觉得是比较有意思的background-attachment使用的是 css 里面的 background-attachment属性：值描述scroll背景图片随着页面的滚动而滚动，这是默认的。fixed背景图片不会随着页面的滚动而滚动local背景图片会随着元素内容的滚动而滚动。使用 fixed属性就可以让滚轮滚动的时候图片不跟随滚轮代码<!DOCT
复制链接

扫一扫

专栏目录