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里面,但是很显然碰到一个问题,图片太大,而且 ...
随机推荐
- Java取出String字符串括号中的内容
形如: String idStr="dfda(2018)41324"; private int getId(String gSQL){ String quStr=gSQL.subs ...
- 同步网络时间到linux服务器（先修改时区再进行同步网络时间）
查看时区:date -R 修改整个系统时区: rm -f /etc/localtime ln -s /usr/share/zoneinfo/Asia/Shanghai /etc/localtime 网 ...
- 0x8002801D：库没有注册
同一段代码,在测试机上运行成功,但在用户机上运行失败,并报错:无法将类型为GeoProcessorClass的COM对象强制转换为接口类型IGeoProcessor,此操作失败的原因是COM组件调用Q ...
- 移动端HTML5框架
一:移动端HTML5框架 http://jquerymobile.com/jQuery Mobile http://jqtjs.com/jQTouch http://www.sencha.com/pr ...
- 搭建nginx流媒体服务器(支持HLS)
环境搭建 (一)下载源代码 nginx,地址:http://nginx.org/可以选择需要的版本下载 nginx_mod_h264_streaming-2.2.7.tar.gz ,支持MP4流,具体 ...
- UNIX网络编程读书笔记：recv和send函数
这两个函数类似于标准的read和write函数,不过需要一个额外的参数. #include <sys/socket.h> ssize_t recv(int sockfd, void *bu ...
- Bash Shell的环境配置文件
login shell:取得bash时需要完整的登录流程 non-login shell:取得bash接口的方法不需要重复登录,举例来说,你以x window登录Linux后,再以x的图形界面启动终端 ...
- linux系统中的DNS服务器介绍
http://lq2419.blog.51cto.com/1365130/1172269 DNS:Domain Name Service,linux上的DNS服务是基于一种软件BIND实现的.BIND ...
- 深入RecyclerView-为什么要使用ItemDecoration
Part 1:不要用view做分割线 首先,什么是ItemDecoration?来看看官网是如何解释的. ItemDecoration允许从adapter的数据集合中为特定的item视图添加特性的绘制 ...
- IO多路复用之epoll
1.基本知识 epoll是在2.6内核中提出的,是之前的select和poll的增强版本.相对于select和poll来说,epoll更加灵活,没有描述符限制.epoll使用一个文件描述符管理多个描述 ...