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

    css 背景不滚动的实现方法

    藏色散人藏色散人2020-11-20 11:26:32原创54

    css背景不滚动的实现方法:首先新建一个html代码页面;然后在<title>标签后面创建一个<style>标签;接着在这个标签里设置<body>标签的背景图片;最后设置“background-repeat:no-repeat;”属性即可。

    推荐:《css视频教程

    打开html开发软件,新建一个html代码页面。

    5bb3bcbab3492a5580ec9257995a694.png

    在html代码页面的<body>标签里面输入多行段落文字,用于后面浏览器滚动条滚动的时候查看图片时候随滚动条而滚动条。如图

    dc969f8ebc8a7231d967b80242f4047.png

    设置背景图片样式。在<title>标签后面创建一个<style>标签,然后在这个标签里设置<body>标签的背景图片,以及背景图片不重复。'

    样式代码:

    body{
    background-image: url(img/bg.jpg);
    background-repeat:no-repeat;
    }

    67851d2f9164b936271e4247b472852.png

    保存html代码后使用浏览器打开,这个时候滚动浏览器滚动条发现背景图片是随浏览器滚动条的滚动而滚动的。

    20344bc7642d8f080e8f5253ad9c33a.png

    使用background-attachment: fixed设置背景图片不随滚动条而滚动。回到html代码页面,在body样式中添加上background-attachment: fixed即可。

    如图

    67bf2b823af91b15211eff325df4158.png

    保存html代码页面后刷新浏览器,这个时候滚动浏览器滚动条发现背景图片已经固定不随浏览器滚动而滚动了。如图

    8bdcdfdce0be0e94d03f520a597a163.png

    以上就是css 背景不滚动的实现方法的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:css
    上一篇:css怎么设置全屏背景图片 下一篇:css中的类选择器有什么用
    第14期线上培训班

    相关文章推荐

    • css属性可分为哪几大类• 怎么在html页面写css样式表• css3怎么让文字垂直居中显示• 如何解决myeclipse 8.5 css乱码问题

    全部评论我要评论

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

    PHP中文网