HTML页面滚动时背景图片不会移动_html图片随着滚轮跟着动资源-CSDN文库

共3个文件

project：1个

jpg：1个

html：1个

5星 · 超过95%的资源 113 浏览量 2019-06-02 01:00:21 上传评论收藏 492KB RAR 举报

标题中的“HTML 页面滚动时背景图片不会移动”指的是在网页设计中实现的一个特效，即当用户滚动页面内容时，背景图片的位置保持不变，营造出一种固定背景或视差滚动的效果。这种效果通常通过CSS（层叠样式表）来实现，可以增加网站的视觉吸引力和用户体验。下面将详细讲解如何实现这一效果。我们需要了解CSS中的`background-attachment`属性。这个属性决定了背景图像是否随着元素的内容滚动。当设置为`fixed`时，背景图片会固定在视口（浏览器窗口）上，不论用户如何滚动页面，图片位置都不会改变；而默认值`scroll`则会使背景随着内容一起滚动。实现这个效果的代码示例如下： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { background-image: url('your-background-image.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover; /* 或者 'contain'，根据需要调整 */ background-attachment: fixed; } </style> </head> <body>  </body> </html> ``` 在这个例子中，`background-image`定义了背景图片的URL，`background-position`设置图片的初始位置，`background-repeat`防止图片平铺，`background-size`控制图片的尺寸，`background-attachment: fixed;`就是关键，它使得背景图片在滚动时固定。除了上述方法，还可以使用CSS3的`background-position`属性的百分比值配合`background-attachment: scroll;`来模拟类似效果，通过动态改变背景位置，使背景看起来像是固定不动的。但这种方法更复杂，需要计算滚动条的位置，并可能涉及JavaScript的使用。标签中提到的“源码”意味着可能需要查看实际的代码示例来理解这个概念，而“工具”可能指的是开发者可以使用的代码编辑器、调试工具等辅助工具，这些工具可以帮助开发者更好地实现和测试此类效果。实现“HTML 页面滚动时背景图片不会移动”的效果主要依赖于CSS的`background-attachment`属性，通过合理设置其他相关属性，可以创建出丰富的视觉体验。在实际开发过程中，可以结合代码编辑器进行实时预览和调试，确保效果符合预期。

资源推荐

资源详情

资源评论

收起资源包目录

demo.rar （3个子文件）

demo

.project 1KB

demo.html 764B

bg.jpg 509KB

<!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>

评论收藏

内容反馈