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里面,但是很显然碰到一个问题,图片太大,而且 ...
随机推荐
- 一次踩坑记录（使用rpc前后端分离服务总是注册不上）
问题简述: 项目架构使用了前后端分离,使用rpc进行服务调用与注册,这里没有用dubbo之类的,仅仅用zookeeper,每次在启动项目时总是报错rpcException异常跟NPE异常,后台查看zo ...
- 锁Lock的概念
并发访问同一资源的功能,需要引入锁Lock的概念,也就是说,某个时刻,当有一个访问类访问这个数据对象时,这个数据对象必须上锁Locked,用完后就立即解锁unLocked,再供其它访问类访问.
- 在div 底部显示背景图片
下面代码实现div层背景图片在底部显示: div { background : url (/images/bg.jpg) no-repeat fixed ; background-position-y ...
- 查找文本工具grep
许多时候需要从一大堆的命令输出或文本内容中找出一两行关键的内容,例如从系统用户文件中查找某个用户.如果不借助工具,这将是一项非常繁琐的工作,这时可以使用grep工具对内容进行筛选. grep(glob ...
- getLastSql（）用法
getLastSql()用法 $User = M("User"); // 实例化User对象 $User->find(1); echo $User->getLastSq ...
- 用记事本编写一个Servlet项目
第一步:建立目录 新建一个文件夹FirstServlet,然后在FirstServlet目录下面再建两个文件夹,分别为:WEB-INF和src.最后在WEB-INF下面建一个classes文件夹 第二 ...
- IDEA使用及优化
1.修改IntelliJ IDEA\bin\idea64.exe.vmoptions文件的内容 2.Setting配置 2.1 设置主题 2.2 设置编辑区主题 如果想要更多的主题效果的话,可以到如下 ...
- NTP服务及时间同步(CentOS6.x)(转)
今有一小型项目,完全自主弄,原来以为很简单的NTP服务,我给折腾了2个多小时才整撑头(以前都是运维搞,没太注意,所以这技术的东西,在简单都需要亲尝啊),这里记录为以后别再浪费时间. 目标环境,5台li ...
- Android数据库升级实例
第一部分 Andoird的SQLiteOpenHelper类中有一个onUpgrade方法.帮助文档中只是说当数据库升级时该方法被触发.经过实践,解决了我一连串的疑问: 1. 帮助文档里说的“数据库升 ...
- Linux命令-文件处理命令:tail
tail /etc/services 查看etc目录的services文件最后10行内容(默认显示后10行内容) tail -n /etc/services 查看etc目录的services文件的后5 ...