css设置背景固定不滚动效果的示例
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设置背景固定不滚动效果的示例的更多相关文章
- css 设置背景图片模糊，内容不模糊
需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 原始代码: <!DOCTYPE html> <html lang=" ...
- unity 背景无限循环滚动效果
背景无限循环滚动效果如下示: 步骤如下: 导入背景图片后,设置图片的格式,如下图: 2.图片格式也可以设置是Texture格式,但是Wrap Mode 一定要是Repeat[重复发生]:然后记得App ...
- img只显示图片一部分 或 css设置背景图片只显示图片指定区域
17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
- CSS 设置背景透明度，不影响子元素
由于 opacity 属性能被子元素继承,使用它设置父元素背景透明度时也会影响子元素． 解决方法: 1> 使用 RGBA Example .classname { /* RGBa, 透明度0.6 ...
- 解决css设置背景透明，文字不透明
设置元素的透明度: -moz-opacity:0.8; /*在Firefox中设置元素透明度 filter: alpha(opacity=80); /*ie使用滤镜设置透明 但是当我们对一个标 ...
- CSS——设置背景
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- div+css实现表头固定内容滚动表格
<div class="m-demo"> <table> <thead> <tr><th>定宽a</th>& ...
- （转）background-position—CSS设置背景图片的位置
background-position :在 CSS 中通过 background-position 属性可以调整背景图片的位置.因为在默认情况下背景图片都是从设置了 background-posit ...
- 使用CSS设置背景图片，图片比较大，完全显示在一个DIV中
做的时候想要边框为比较好看的样式,需要UI切图并且放在div中,看起来会好看点 像这样的,我随便挑选了一个,UI帮我切图出来 需要把这个图片填到相应的div里面,但是很显然碰到一个问题,图片太大,而且 ...
随机推荐
- iOS子线程操作检测版本更新，有新版本通知用户更新, CheckVersion
iOS子线程操作检测版本更新,有新版本通知用户更新 CheckVersion 一:如何使用: #import "CheckVersion.h" //输入你的app在appStore ...
- Oracle学习(五)：多表查询
1.知识点:能够对比以下的录屏进行阅读 SQL> --等值连接 SQL> --查询员工信息: 员工号 姓名 月薪 部门名称 SQL> select empno,ename,sal,d ...
- UITextView 的使用
直接上代码: // // RootViewController.m // UIText_test // // #import "RootViewController.h" #imp ...
- Solr调优参考
http://rdc.taobao.com/team/jm/archives/1753#nav 共整理三部分,第一部分Solr常规处理,第二部分针对性性处理,前者比较通用,后者有局限性.务必根据具体应 ...
- ztree获取选中节点
$(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); functi ...
- 将相关数据拼成所需JSON数据
参考: http://www.cnblogs.com/shuilangyizu/p/6019561.html 有时候我们需要将一些数据拼装成所需要格式的JSON,可以使用如下方法,本人觉得还是比较方便 ...
- C while循环的自增和自减
自增和自减 --i 是先执行i=i-1,然后再使用i的值, 这时的i 值就是表达式--i的值.i-- 是先使用i的值作为表达式i--的值,然后,执行i=i-1操作. 实例一: #include &qu ...
- 【BLE】CC2541之主机端读取特征值
本篇博文最后改动时间:2017年01月06日,11:06. 一.简单介绍 本文介绍怎样在SimpleBLECentralproject中,读取SimpleBLEPeripheralproject中的特 ...
- Atitit.ALT+TAB没反应车and 点击任务栏程序闪烁但是不能切换
Atitit.ALT+TAB没反应车and 点击任务栏程序闪烁但是不能切换 1. 可能你的Alt+Tab键被别人禁用了,试下下面的方法: 1 2. 为什么要禁用Alt+Tab 1 3. ALT+TAB ...
- swift的UITableView的使用
UITableView是app开发中经常使用到的控件,功能非常强大,多用于数据的显示. 以下以一个简单的实例来介绍其基本使用方法. 先建一个project 代码例如以下: import UIKit c ...