• 技术文章 >web前端 >css教程

    css怎么设置背景不动

    藏色散人藏色散人2021-04-09 09:31:01原创118

    css设置背景不动的方法:首先创建一个HTML示例文件;然后输入head标签和css样式标签代码;接着在style标签之间,输入定义网页背景图片的代码;最后设置“background-repeat:no-repeat”属性即可。

    本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

    首先我们打开系统记事本程序,输入网页基本代码

    <html>
     <body>
     </body>
    </html>

    89d661c37c95f902b1d3d34c4daff18.png

    然后输入head标签和css样式标签代码

    <head>
      <style type="text/css">
      </style>
    </head>

    8b595376d8368a55677dbe41b97e3b9.png

    点击style标签之间,输入定义网页背景图片的代码

    body
    { 
      background-image:url('d:/bg.gif');
    }

    e469a961ab473a1eb7b957944e4c952.png

    然后在正文body标签下输入一些主体标签和内容

    <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>
    <p>图像不会随页面滚动。</p>
    <p>图像不会随页面滚动。</p>
    <p>图像不会随页面滚动。</p>
    </body>

    423894f9495cffd7c0f4bef5ad5c6fa.png

    点击文件,另存为命令,将内容保存为html格式后,打开网页预览下。

    72c237fcf5d1dc118633b0b8376e7f8.png

    大家发现现在这种状态,我们滚动鼠标滚轮时候,网页内容和背景图片是同时滚动的,为便于查看,我们修改下代码,让图片不重复显示。

    <style type="text/css">
    body 
    {
    background-image:url(d:/bg.gif);
    background-repeat:no-repeat;
    }
    </style>

    然后再预览效果。

    690069aa69944d89f12b53bfc2b1f13.png

    这样可以很明显的看出来背景图片的变化,为了固定背景图片,我们修改代码为

    <style type="text/css">
    body 
    {
    background-image:url(d:/bg.gif);
    background-repeat:no-repeat;
    background-attachment:fixed
    }
    </style>

    再来看下效果。

    3015eb955be4b0d95d72959566a32b7.png

    【推荐学习:css视频教程

    以上就是css怎么设置背景不动的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css
    上一篇:css怎么实现多行文本溢出隐藏 下一篇:css如何实现显示和隐藏
    第15期线上培训班

    相关文章推荐

    • css定位方式有哪几种• css指的是什么• css字符间距怎么设置• css字体如何加粗• css li的点怎么去掉

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网