css 背景不滾動的實作方法-css教學-PHP中文網

首頁

web前端

css教學

css 背景不滾動的實作方法

藏色散人

Nov 20, 2020 am 11:26 AM

css

css背景不捲動的實作方法：先新建一個html程式碼頁面；然後在
標籤後面建立一個<style>標籤；接著在這個標籤裡設定<body>標籤的背景圖片；最後設定「background-repeat:no-repeat;」屬性即可。 </style>

css 背景不滾動的實作方法

推薦：《css影片教學》

開啟html開發軟體，新建一個html程式碼頁面。

css 背景不滾動的實作方法

在html程式碼頁面的

標籤裡面輸入多行段落文字，用於後面瀏覽器滾動條滾動的時候查看圖片時候隨滾動條而滾動條。如圖

css 背景不滾動的實作方法

設定背景圖片樣式。在

標籤後面建立<style>標籤，然後在這個標籤裡設定<body>標籤的背景圖片，以及背景圖片不重複。 '<p>樣式代碼：<pre class='brush:php;toolbar:false;'>body{ background-image: url(img/bg.jpg); background-repeat:no-repeat; }</pre><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/101/832/846/1605842667794518.png?x-oss-process=image/resize,p_40" class="lazy" title="1605842667794518.png" alt="css 背景不滾動的實作方法"/><p>儲存html程式碼後使用瀏覽器打開，這個時候滾動瀏覽器滾動條發現背景圖片是隨瀏覽器滾動條的滾動而滾動的。 <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/943/102/700/1605842672440514.png?x-oss-process=image/resize,p_40" class="lazy" title="1605842672440514.png" alt="css 背景不滾動的實作方法"/><p>使用background-attachment: fixed設定背景圖片不隨捲軸而捲動。回到html程式碼頁面，在body樣式中加入上background-attachment: fixed即可。 <p>如圖<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/399/323/641/1605842676462091.png?x-oss-process=image/resize,p_40" class="lazy" title="1605842676462091.png" alt="css 背景不滾動的實作方法"/><p>儲存html程式碼頁面後刷新瀏覽器，這個時候滾動瀏覽器滾動條發現背景圖片已經固定不隨瀏覽器滾動而滾動了。如圖<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/295/192/789/1605842680263144.png?x-oss-process=image/resize,p_40" class="lazy" title="1605842680263144.png" alt="css 背景不滾動的實作方法"/></style>

以上是css 背景不滾動的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn