標籤：
css設定背景固定不滾動效果的樣本
背景固定不滾動各位看到最多的無非就是QQ空間了，我們在很多的空間都可以看到內容滾動而北京圖片不滾動了，下文整理了幾個關於背景固定不滾動css代碼。
一、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>
從上面的幾個例子來看背景不滾動都是通過定位來解決了，上面的例子各有千秋了各位可以選擇合適自己的效果代碼。
css設定背景固定不滾動效果的樣本
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
