美文网首页
CSS-背景4-内容滚动背景图固定

CSS-背景4-内容滚动背景图固定

作者: Java小工匠 | 来源:发表于2017-08-10 21:16 被阅读0次

1、内容滚动背景图固定在指定位置

素材:


bg.png

源代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图不随内容滚动</title>
    <style type="text/css">
    body{
        background: url(bg.png) no-repeat fixed center;
    }
     
    </style>
</head>
<body>
   测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
        测试内容<br/>
</body>
</html>

**运行效果: **
内容滚动,图片不滚动。


image.png

相关文章

  • CSS-背景4-内容滚动背景图固定

    1、内容滚动背景图固定在指定位置 素材: 源代码: **运行效果: **内容滚动,图片不滚动。

  • css背景控制

    属性:background-attachment说明:设置背景图的滚动方式,可以为固定或者随内容滚动可用值:fix...

  • 刚发现了background-attachment属性,好用

    取值有四种: scroll:默认值,背景图相对于元素固定,背景随页面滚动而移动,即背景和内容绑定。 fixed:背...

  • CSS学习笔记[4]——CSS常见样式[下]

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

  • 2017-02-24 CSS 学习笔记 am

    定位流 固定定位 什么是固定定位固定定位和前面学习的背景关联方式很像,背景定位可以让背景图片不随着滚动条的滚动而滚...

  • 移动端背景无法固定解决方案

    在项目过程中,遇到这样一个问题,背景图片固定背景,不随着滚动条滚动! 大伙都知道直接用背景固定位就可以解决了! ...

  • CSS background-attachment 背景图片固定

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

  • Cssday09

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

  • 3.2

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

  • CSS笔记

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

网友评论

      本文标题:CSS-背景4-内容滚动背景图固定

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