css設定背景固定不滾動效果的樣本

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

一、css設定背景不滾動的效果

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>css禁止背景滾動 - www.jbxue.com<111cn.nettyle type="text/css">*{ margin:0; padding:0;}html,body{ width:100%; height:100%; overflow:auto; position:relative;}.container{ width:100%; height:100%; overflow:auto;}.bg{ background:#000000;opacity:0.5; filter:alpha(opacity=50); position:absolute; z-index:1; overflow:auto; width:100%; height:100%; left:0; top:0;}.box{ position:absolute; left:50%; top:50%; width:300px; z-index:11; height:300px; line-height:300px; color:#f60; font-weight:bold; font-size:20px;}.info{ position:absolute; left:-50%; top:-50%; z-index:10; width:300px; height:300px; text-align:center; border:1px solid #f00; background:#fff;}</style></head><body><div class="container"><script type="text/javascript">for(var i=0;i<150;i++){document.write('<center>指令碼學堂，div+css教程，禁止背景圖片滾動。</center>');}</script></div><div class="bg"></div><div class="box"><div class="info">我就不動</div></div></body></html>

二、css設定body背景圖片固定不動內容滾動

css中使body背景圖片固定不動內容滾動：

style="background-attachment: fixed"

例子：

body { background-image: url(images/dbg.jpg); background-repeat: no-repeat; font-family: "宋體"; font-size: 12px; line-height: normal; font-weight: normal; color: #FFFFFF; background-attachment: fixed;}

三、css固定背景圖片不滾動

例子：

<html> <head> <style type="text/css"> body { background-image:url('/images/wall1.jpg'); background-repeat: no-repeat; background-attachment: fixed;} #codefans_net{height:1628px;}</style> <title>CSS固定背景圖片不滾動代碼 - www.jbxue.com</title></head> <111cn.netv id="codefans_net">拖動捲軸，文字會消失，背景依然存在。</div></body> </html>

四、css設定頁面背景不動只捲軸動效果

方法一（頁面背景不動只捲軸動）：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>不動的背景圖</title><style type="text/css">body{background-image:url(images/0004.jpg);background-repeat:no-repeat;background-position:center;background-attachment:fixed;}</style></head><body><div style="position:absolute;top:400px;left:200px;height:500px;color:red">通過CSS設定網頁捲軸滾動但是頁面背景圖片靜止不動（請查看原始碼）<br />注意：background-image:url(images/0004.jpg); 設定一張相對路徑下存在的背景圖片</div></body></html>

方法二（頁面背景不動只捲軸動）：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>不動的背景圖</title><style type="text/css">body{background-image:url(images/0004.jpg);background-repeat:no-repeat;background-position:center;}</style></head><body bgproperties="fixed"><div style="position:absolute;top:400px;left:200px;height:500px;color:red">請查看原始碼(使用了BODY的bgproperties="fixed"屬性)</div></body></html>

從上面的幾個例子來看背景不滾動都是通過定位來解決了，上面的例子各有千秋了各位可以選擇合適自己的效果代碼。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More