css背景不滚动的实现方法:首先新建一个html代码页面;然后在标签后面创建一个标签;接着在这个标签里设置<body>标签的背景图片;最后设置“background-repeat:no-repeat;”属性即可。</p></blockquote> <p><img src="https://img.php.cn/upload/article/202011/20/2020112011230458957.jpg" alt="css 背景不滚动的实现方法" ></p> <p>推荐:《<a href="https://www.php.cn/course/list/12.html" target="_blank">css视频教程</a>》</p> <p>打开html开发软件,新建一个html代码页面。</p> <p><img src="https://img.php.cn/upload/image/705/857/176/1605842653200855.png" title="1605842653200855.png" alt="5bb3bcbab3492a5580ec9257995a694.png"></p> <p>在html代码页面的<body>标签里面输入多行段落文字,用于后面浏览器滚动条滚动的时候查看图片时候随滚动条而滚动条。如图</p> <p><img src="https://img.php.cn/upload/image/409/440/167/1605842657290420.png" title="1605842657290420.png" alt="dc969f8ebc8a7231d967b80242f4047.png"></p> <p>设置背景图片样式。在<title>标签后面创建一个<style>标签,然后在这个标签里设置<body>标签的背景图片,以及背景图片不重复。'</p> <p>样式代码:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">body{ background-image: url(img/bg.jpg); background-repeat:no-repeat; }</pre><div class="contentsignin">Salin selepas log masuk</div></div><p><img src="https://img.php.cn/upload/image/101/832/846/1605842667794518.png" title="1605842667794518.png" alt="67851d2f9164b936271e4247b472852.png"></p> <p>保存html代码后使用浏览器打开,这个时候滚动浏览器滚动条发现背景图片是随浏览器滚动条的滚动而滚动的。</p> <p><img src="https://img.php.cn/upload/image/943/102/700/1605842672440514.png" title="1605842672440514.png" alt="20344bc7642d8f080e8f5253ad9c33a.png"></p> <p>使用background-attachment: fixed设置背景图片不随滚动条而滚动。回到html代码页面,在body样式中添加上background-attachment: fixed即可。</p> <p>如图</p> <p><img src="https://img.php.cn/upload/image/399/323/641/1605842676462091.png" title="1605842676462091.png" alt="67bf2b823af91b15211eff325df4158.png"></p> <p>保存html代码页面后刷新浏览器,这个时候滚动浏览器滚动条发现背景图片已经固定不随浏览器滚动而滚动了。如图</p> <p><img src="https://img.php.cn/upload/image/295/192/789/1605842680263144.png" title="1605842680263144.png" alt="8bdcdfdce0be0e94d03f520a597a163.png"></p>