<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
/*兼容IE6+，火狐，谷歌，欧朋，苹果*/
background: url(bg.jpg) no-repeat center top fixed;
/*background-attachment: fixed;*/
/*background-attachment :定义背景图片随滚动轴的移动方式
取值: scroll | fixed | inherit
scroll: 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed: 当页面的其余部分滚动时，背景图像不会移动。
inherit: 继承初始值: scroll（任何版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。）
继承性: 否
适用于: 所有元素*/
}
</style>
</head>
<body>
<div style="height: 10000px;"></div>
</body>
</html>
效果图：
相关推荐
HTML5页面滚动背景图片动画效果是一种现代化的网页设计技术，它通过JavaScript和CSS3的结合，为用户提供了丰富且互动的视觉体验。这种特效通常包括背景图片随着页面滚动而动态变化，比如平滑过渡、视差滚动或者动态...
在这个"html5响应式页面滚动背景图片动画特效"中，我们主要关注的是如何在页面滚动时实现背景图片的动态效果。这通常涉及到CSS3的transform和transition属性，以及可能的JavaScript或jQuery插件来增强用户体验。在...
这种效果可以使背景图片在页面滚动时保持不动，而页面上的其他元素（如文本、按钮等）随滚动条移动。这种设计可以增加网站的视觉吸引力，创造出深度感或者强调特定的背景图像。 HTML（超文本标记语言）是构建网页的...
HTML5页面滚动图片视差滚动效果是一种现代网页设计技术，它为用户带来了一种沉浸式浏览体验。这种效果使得背景图像在用户滚动页面时以较慢的速度移动，与前景元素形成速度差，从而营造出深度感和立体感，增强视觉...
这段代码中，`background-image`定义了背景图片的URL，`no-repeat`表示背景图像只显示一次，`center center`将图像居中，`fixed`使得背景图像在滚动时保持位置不变，而`background-size: cover`则实现了背景图像的...
通过监听滚动事件，可以精确地控制各个元素在页面滚动时的位置变化。例如，可以使用`window.onscroll`事件来检测用户的滚动行为，并根据滚动距离调整元素的位置。同时，JavaScript库如jQuery或更现代的库如React、...
在这个特定的案例中，我们有一个压缩包文件"html5 canvas实现的页面滚动背景图片旋转动画特效源码.zip"，其中包含了一个使用HTML5 Canvas技术来创建页面滚动时背景图片旋转动画效果的源代码。下面将详细讲解这个知识...
在模板中，可能使用了`background-attachment`属性配合JavaScript库如Parallax.js或Skrollr来创建这种效果，使背景图片在用户滚动页面时产生平滑的相对移动。 1. **HTML5新特性** - **语义化标签**：HTML5引入了...
在网页设计中，创建一个滚动时背景不动的HTML页面是一个常见的需求，这通常通过CSS（层叠样式表）来实现。这种效果被称为“固定背景”或“背景固定”，可以让背景图像在用户滚动页面时始终保持在相同的位置，而内容...
HTML5视差页面滚动背景变形动画特效是一种现代网页设计技术，它通过巧妙地结合CSS3、JavaScript和HTML5的新特性，创造出引人入胜的用户体验。这种特效在用户滚动页面时，背景元素以不同的速度移动，营造出深度感和...
WebGL滚动背景图片旋转动画特效是一种利用HTML5的Canvas元素结合WebGL技术，为网页创造出动态、视觉冲击力强的背景动画效果。WebGL是一种基于OpenGL标准的JavaScript API，它允许在浏览器中进行硬件加速的3D图形渲染...
这个源码压缩包“html5实现的伴随页面滚动呈现出图片视差滚动效果源码.zip”显然包含了一个使用HTML5实现的特殊效果，即图片视差滚动。这种效果在网页滚动时，不同层的背景图片以不同的速度移动，从而营造出深度感和...
在这个案例中，JS被用来监听页面滚动事件，并在事件触发时改变图片元素的样式，实现动画效果。 `CSS3`是层叠样式表的最新版本，提供了许多强大的功能，如选择器增强、边框和背景效果、过渡（transition）、动画...
在视觉滚动特效中，`background-position`是关键，因为它允许我们根据页面滚动的幅度，动态改变背景图片的位置，从而产生视觉上的深度和运动感。 **实现原理** 这个插件的工作原理主要是监听页面的滚动事件，当...
视差滚动是网页设计中的一个流行趋势，它让网页背景在用户滚动页面时以不同的速度移动，创造出深度感和动态视觉体验，从而提升用户体验和互动性。 1. **Parallax.js基本原理** Parallax.js通过监听用户的滚动事件...
单页面滚动HTML5模板是一种流行的网页设计趋势，它将整个网站的内容组织在一个单一的长页面上，用户通过滚动屏幕来浏览不同的部分。这种设计风格在现代网页设计中被广泛采用，因为它提供了简洁、直观的用户体验，...
滚动背景放大效应是一种常见的网页设计技巧，通过这种技术，用户在浏览页面时，随着滚动页面，背景图片会根据设定的方式逐渐放大，从而创造出引人入胜的视觉效果。这一效果通常借助JavaScript库，如jQuery来实现，以...
本主题聚焦于"jquery二屏图片滚动按钮控制背景图片和手机图片滚动切换"，这是一个常见的网页交互设计，常用于提升用户体验，尤其是在响应式网站设计中。 首先，我们来详细解析这个知识点： 1. **jQuery库的使用**...
`，可以使背景图片在浏览器窗口内固定位置，即使页面滚动也不会移动背景图片的位置。 #### 二、其他背景相关属性 为了更好地控制背景图像，CSS提供了多个属性。下面简要介绍其中几个重要的属性： 1. **`...