pc页面滚动的时候,背景图不动只是页面滚动
代码如下,直接拷贝出去就能看效果;
用到的方法
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.container{
width: %; height: %;
position: relative;
z-index: ;
}
.bd_index{
position: relative;
z-index: ;
width: %; height: 600px;
background: url(lib/banner.jpg) no-repeat center center;
background-size: cover;
background-attachment: fixed;
}
.neirong{
width: 1200px; height: 600px;
margin: auto;
font-size: 22px;
color: #fff;
box-sizing: border-box;
padding: 100px ;
text-align: center;
}
.index_two{
width: %; min-height: 400px;
background: url(lib/bg_01.jpg) no-repeat center center;
/* 背景图高度1200px 比较高的背景图才行 */
position: relative;
background-size: cover;
z-index: ;
background-attachment: fixed;
}
.wenzi{
height: 600px;
width: %;
background: #FFF;
position: relative;
z-index: ;
font-size: 22px;
color: #;
box-sizing: border-box;
padding: 100px ;
text-align: center;
}
</style>
</head>
<body> <div class="container">
<!-- 效果一 -->
<div class="bd_index one">
<div class="neirong">都是发了好感动卤肉饭光华路;<br>是淡饭黄齑</div>
</div>
<!-- 效果二 -->
<div class="wenzi">
都是发了好感动卤肉饭光华路;<br>是淡饭黄齑
</div>
<div class="index_two"> </div>
<div class="wenzi">
都是发了好感动卤肉饭光华路;<br>是淡饭黄齑
</div>
</div> </body>
</html>
pc页面滚动的时候,背景图不动只是页面滚动的更多相关文章
- 页面中图片以背景图形式展示好还是以img标签形式展示
img和background-image的异同: img是网页结构层面上的标签,页面中多一个img标签就会多一次http请求,且当我们浏览页面时,img标签作为网页结构的一部分,会在浏览器加载结构的过 ...
- html背景图不随滚轮滚动,而且按住Ctrl并滚动滚轮时,图片不会变大缩小,就像百度的首页一样
之前在百度知道我提问过这一个问题,后来解决了.不过好多人来问我时怎么解决的,源码.其实很简单.这里我贴一下代码.有需要的小伙伴不用再加我qq了,直接来这里取吧. 里面的图片是我随便找的. <!D ...
- css固定背景图位置 实现屏幕滚动时 显示背景图不同区域
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- [Unity3D插件]2dtoolkit系列二 动画精灵的创建以及背景图的无限滚动
经过昨天2dtoolkit系列教程一的推出,感觉对新手还有有一定的启发作用,引导学习使用unity 2dToolKit插件的使用过程,今天继续系列二——动画精灵的创建,以及背景图的无限循环滚动,在群里 ...
- 背景图height:100%显示
这段时间,写移动端页面,总是遇到背景图在不同的设备上的显示拉伸问题: 本来想写百分比,可是并没有显示,又不想media@ ,换一种思路用img写 群友提供了一个办 html,body{height:1 ...
- winform 添加背景图 闪屏问题解决
winform中只要添加了背景图片资源,窗体加载显示的时候就会出现不停的闪屏操作,网上找了很多方法,效果都不明显: 然后自己观察和思路:看窗体的加载过程,当有背景图的时候,首先出来的是背景图,之后背景 ...
- css常用属性之绝对定位、相对定位、滚动条属性、背景图属性、字体、鼠标、超链接跳转页面
1.绝对定位position: fixed(比如广告页面向下滑动的时候,页面最上方有个标题不能随之滑动,就需要用到position: fixed,同时还需要用到一个标签(标签高度很高才会出现滚动的情况 ...
- IE6下 input 背景图滚动问题及标签规范
ie6 背景图滚动问题: <title>ie6下input背景图滚动问题</title> <style> .box{ height:20px; width:300p ...
- css中用一张背景图做页面的技术有什么优势?
css中用一张背景图做页面的技术有什么优势? 简单介绍一下 CSS Sprites 的优点: 当用户往U盘中拷200张图片,会等很久.但是如果弄成一个文件,再拷贝就会快很多. CSS Sprites ...
随机推荐
- HAOI2010软件安装(树形背包)
HAOI2010软件安装(树形背包) 题意 有n个物品,每个物品最多会依赖一个物品,但一个物品可以依赖于一个不独立(依赖于其它物品)的物品,且可能有多个物品依赖一个物品,并且依赖关系可能形成一个环.现 ...
- 继续聊WPF——自定义CheckBox控件外观
上一篇文章中谈到了BulletDecorator控件,就是为自定义CheckBox控件的模板做准备,因为CheckBox需要比较严格的布局,正好,BulletDecorator控件就合适了,该控件的布 ...
- Git 基础教程 之 Bug分支和Stash
在Git中,每个Bug都可以通过一个新的临时分支修复,修复后,合并分支,然后删除. ① 当接到一个Bug任务时,但dev上进行的工作还没有提交时: ② git stash 把现场工作“储藏 ...
- Unity 利用FFmpeg实现录屏、直播推流、音频视频格式转换、剪裁等功能
目录 一.FFmpeg简介. 二.FFmpeg常用参数及命令. 三.FFmpeg在Unity 3D中的使用. 1.FFmpeg 录屏. 2.FFmpeg 推流. 3.FFmpeg 其他功能简述. 一. ...
- hdu 4857 逆向拓扑排序+反向输出
/*一组测试实例 4 4 2 3 1 2 4 */ #include<stdio.h> #include<string.h> #include<queue> usi ...
- mysql use index () 优化查询的例子
USE INDEX在你查询语句中表名的后面,添加 USE INDEX 来提供你希望 MySQ 去参考的索引列表,就可以让 MySQL 不再考虑其他可用的索引.Eg:SELECT * FROM myta ...
- WordPress 在Ubuntu下安装插件、主题输入FTP及无法创建目录的问题
1.安装新主题.插件需要输入FTP的账户密码 如果不想输入的话可以使用在wp-config.php文件中添加脚本方式. define("FS_METHOD","direc ...
- Qt 3D的研究(十):描边渲染(轮廓渲染)以及Silhouette Shader
Qt 3D的研究(十):描边渲染(轮廓渲染)以及Silhouette Shader 之前写了两篇文章,介绍了我在边缘检測上面的研究.实际上.使用GPU对渲染图像进行边缘检測.前提是须要进行两遍渲染.前 ...
- C语言播放声音最简单的两种方法
1. 假设仅须要播放波形文件wav格式的声音,非常easy.仅仅需一句话: PlaySound(TEXT("Data\\1.wav"), NULL, SND_FILENAME | ...
- 2.2Shiro架构