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里面,但是很显然碰到一个问题,图片太大,而且 ...
随机推荐
- Units specified don't exist SHSUCDX can't install
重装系统,出现“Units specified don't exist SHSUCDX can't install”怎么办? 昨天,我们领导弄了个联想Thinkpad T510i的笔记本,本来预装的是 ...
- PHP快速入门 如何操作MySQL
1 创建一个新的数据库,注意类型设置为utf8_general_ci 2 在数据库中创建一个新的表,比如叫做tg_user(先从左侧选择刚才创建的数据库) 3 创建第一个字段,自动编号.我们估计网站的 ...
- Linux Samba安装与使用
一 安装环境: 虚拟机:RedHat 5.4 192.168.75.128 主机环境:WIN7 32bit 192.168.75.1 网络连接方式:NAT 二 安装步骤: 说明: Ø samb ...
- Guava ---- Ordering排序工具
使用Guava的排序工具类, 高速实现对象的单变量排序和多变量排序, 让你的开发效率爆炸... import com.google.common.collect.Lists; import com.g ...
- 利用JMX统计远程JAVA进程的CPU和Memory---jVM managerment API
从JAVA 5开始,JDK提供了一些JVM检测的API,这就是有名的java.lang.management 包,包里提供了许多MXBean的接口类,可以很方便的获取到JVM的内存.GC.线程.锁.c ...
- 微软的SQLHelper类(含完整中文注释)
using System; using System.Data; using System.Xml; using System.Data.SqlClient; using System.Collect ...
- python ichat使用学习记录
1.OSError: [WinError -2147221003] 找不到应用程序: 'D:\\python\\ichat\\qrcode.jpg' 原因是该库中没有windows系统如何打开二维码图 ...
- log4cplus基础知识
一.简介: log4cplus是C++编写的开源的日志系统. 具有线程安全.灵活.以及多粒度控制的特点,通过将信息划分优先级使其可以面向程序调试.运行.测试.和维护等全生命周期: 你可以选择将信息输出 ...
- 容器适配器（stack、 queue 、priority_queue）源码浅析与使用示例
一.容器适配器 stack queue priority_queue stack.queue.priority_queue 都不支持任一种迭代器,它们都是容器适配器类型,stack是用vector/d ...
- 基于Bootstrap的Asp.net Mvc 分页的实现(转)
最近写了一个mvc 的 分页,样式是基于 bootstrap 的 ,提供查询条件,不过可以自己写样式根据个人的喜好,以此分享一下.首先新建一个Mvc 项目,既然是分页就需要一些数据,我这 边是模拟了一 ...