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里面,但是很显然碰到一个问题,图片太大,而且 ...
随机推荐
- Hadoop-2.2.0中文文档—— 从Hadoop 1.x 迁移至 Hadoop 2.x
简单介绍 本文档对从 Apache Hadoop 1.x 迁移他们的Apache Hadoop MapReduce 应用到 Apache Hadoop 2.x 的用户提供了一些信息. 在 Apache ...
- android中checkbox的padding引发的问题
自己定义checkbox中的勾选框图标.这次由于想偷懒.图标弄的大了些.然后一系列的问题就都引出来了. 1.图标比checkbox的layout_height高.看不见了. 非常吐血吧,Compoun ...
- python 的集合 set（）操作
Python 的集合 set(),是一个无序不重复元素集,可以用于关系测试和消除重复元素. 有以下运算: 1.创建一个set ()集合: 2.add:增加集合元素 3.clea ...
- 【LeetCode】114. Flatten Binary Tree to Linked List
Flatten Binary Tree to Linked List Given a binary tree, flatten it to a linked list in-place. For ex ...
- TensorFlow 简单实例
TF 手写体识别简单实例: TensorFlow很适合用来进行大规模的数值计算,其中也包括实现和训练深度神经网络模型.下面将介绍TensorFlow中模型的基本组成部分,同时将构建一个CNN模型来对M ...
- cocos2dx 3.3 异步加载纹理
这里以3d场景加载为例,2d情况类似. 先同步加载模型数据和尺寸缩小了100倍的贴图,创建mesh.然后异步加载所有精细纹理并每加载完一个就替换一个,并进入场景. 如此做法的效果是当刚进入场景时看到的 ...
- Ubuntu14.04下安装docker 1.9
有以下几种方式: 1. 通过系统自带包安装(可能不是最新版) $ sudo apt-get update $ sudo apt-get install -y docker.io $ sudo ln - ...
- jquery操作复选框(checkbox)十二技巧
jquery操作复选框(checkbox)的12个小技巧. 1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$( ...
- 电影大全 API接口
http://www.apix.cn/services/show/29 http://www.apix.cn/services/show/112
- HTTP 403详解
1.什么是Http 403错误Http协议中对403错误定义如下The server understood the request, but is refusing to fulfill it. Au ...