美文网首页
CSS background-attachment 背景图片固定

CSS background-attachment 背景图片固定

作者: Devops海洋的渔夫 | 来源:发表于2019-02-05 00:35 被阅读45次

仅供学习,转载请注明出处

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>

从上面的效果来看,如果下拉浏览器滚动条,段落的文字内容和背景图片都在下拉,那能不能固定背景图片不移动呢?

这里就涉及到了background-attachment:fixed;的属性。

设置背景图片固定

下面再看下拉一下浏览器看看,如下:


2019年全套Java、Android、HTML5前端、Python、大数据视频,价值数万资源大放送

寻找资源的地址如下:

扫描微信公众号

寻找价值数万的视频资源

相关文章

  • CSS background-attachment 背景图片固定

    仅供学习,转载请注明出处 background-attachment 设置背景图片是固定还是随着页面滚动条滚动 当...

  • 什么是background-attachment

    background-attachment的作用是设置背景图片是随滚动轴如何滚动的css属性 background...

  • Cssday09

    一、CSS背景 background-attachment:设置背景图像是否固定或者随着页面的其余部分滚动。 ba...

  • 3.2

    CSS的背景 background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。•scro...

  • background-attachment 视差动画

    CSS background-attachment 属性 实例 如何指定一个固定的背景图像: 标签定义及使用说明 ...

  • CSS笔记

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

  • 前端学习笔记十四

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

  • css的背景

    css的背景 background-attachment 设置背景图像是否固定或者随着也没的其余部分滚动 back...

  • 背景图片不随着滚动条滚动:background-attach

    背景图片不随着滚动条滚动: background-attachment:fixed; (可简写)

  • [前端学习]css部分学习笔记,第五天

    背景附着 background-attachment:scroll|fixed 背景附着就是指背景图片的滚动形式,...

网友评论

      本文标题:CSS background-attachment 背景图片固定

      本文链接:https://www.haomeiwen.com/subject/gbpmsqtx.html