PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

css 背景不滚动的实现方法

藏色散人
藏色散人 原创
2020-11-20 11:26:32 4499浏览

css背景不滚动的实现方法:首先新建一个html代码页面;然后在

标签后面创建一个<style>标签;接着在这个标签里设置<body>标签的背景图片;最后设置“background-repeat:no-repeat;”属性即可。</style>

推荐:《css视频教程

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

5bb3bcbab3492a5580ec9257995a694.png

在html代码页面的

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

dc969f8ebc8a7231d967b80242f4047.png

设置背景图片样式。在

标签后面创建一个<style>标签,然后在这个标签里设置<body>标签的背景图片,以及背景图片不重复。'<p>样式代码:<pre class="brush:php;toolbar:false">body{ background-image: url(img/bg.jpg); background-repeat:no-repeat; }</pre><p><img src="https://img.php.cn/upload/image/101/832/846/1605842667794518.png" title="1605842667794518.png" alt="67851d2f9164b936271e4247b472852.png"/><p>保存html代码后使用浏览器打开,这个时候滚动浏览器滚动条发现背景图片是随浏览器滚动条的滚动而滚动的。<p><img src="https://img.php.cn/upload/image/943/102/700/1605842672440514.png" title="1605842672440514.png" alt="20344bc7642d8f080e8f5253ad9c33a.png"/><p>使用background-attachment: fixed设置背景图片不随滚动条而滚动。回到html代码页面,在body样式中添加上background-attachment: fixed即可。<p>如图<p><img src="https://img.php.cn/upload/image/399/323/641/1605842676462091.png" title="1605842676462091.png" alt="67bf2b823af91b15211eff325df4158.png"/><p>保存html代码页面后刷新浏览器,这个时候滚动浏览器滚动条发现背景图片已经固定不随浏览器滚动而滚动了。如图<p><img src="https://img.php.cn/upload/image/295/192/789/1605842680263144.png" title="1605842680263144.png" alt="8bdcdfdce0be0e94d03f520a597a163.png"/></style>
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。