页面图片固定 滚动时图片不滚动效果

已于 2022-05-22 23:04:05 修改
阅读量316 收藏
点赞数 1
文章标签： css
于 2022-05-09 09:51:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lsbdgyd/article/details/124659875
版权
本文介绍了如何使用CSS实现背景图片固定效果，使背景在页面滚动时保持不动。通过设置`background-image`, `background-size`, `background-attachment`属性，可以创建一个背景图片在页面滚动时固定不动的效果，适用于网站设计和前端开发。
摘要由CSDN通过智能技术生成

body {

background-image: url(); 图片地址

background-size: cover; 背景图片大小 完全覆盖

background-attachment: fixed; 背景图片固定

}

实现背景图固定 滚动时图片不跟着滚动

lsbdgyd
关注
php页面 背景不动,页面滚动背景图片不动的原理及实现
weixin_36282765的博客
03-25 660
以前看到一种页面滚动条在滚动，而背景图片却不动的效果，页面缓缓的下拉，背景也缓缓的切换，就像放电影一样，后来才知道这叫(Parallax Scrolling)，作为一种优雅酷炫的页面展示的方式，视差滚动(Parallax Scrolling)正受到越来越多前端设计师的宠爱，优设的2014年网页设计趋势中依然能够看到它的影子，所以我们不得不来好好研究下视差滚动的原理和实现方式。原文出处：http:/...
html上下滚动效果图片,JS实现长图上下滚动效果
weixin_34522296的博客
06-03 1367
本文实例为大家分享了JS实现长图上下滚动的具体代码，供大家参考，具体内容如下案例描述将一张长图放在某一固定长宽的盒子里，当鼠标置于盒子的上半部分时，图片向下滑直到到达图片的底部停止；当鼠标置于盒子的下半部分时，图片向上滑直到到达图片的顶部停止。案例图示HTML CSSCSS不作过多解释，详解请看注释部分//通用样式* {margin: 0;padding: 0;}#box {width: 750p...
第一屏层固定位置，滚动页面层固定在源位置
weixin_30443731的博客
02-13 173
第一屏层固定位置，滚动页面层固定在源位置 var top = $(document).scrollTop(); if (($.browser.msie == true) && ($.browser.version == 6.0)) { if (top > 430) $("#nav...
前端页面--在上下滑动时,背景图片不动
weixin_52268321的博客
09-01 775
body{ background:url(“路径”); background-size: 100% 120%; background-repeat:no-repeat; background-position:center; background-attachment: fixed }
让图片固定不动的两种方法
热门推荐
青椒的博客
10-07 1万+
display:block; position: fixed; 如果想让其他部分滚定时在这个图片下边，不遮挡图片，给图片添加 z-index属性 2. background-attachment: fixed; 这个方法之前在写一个有视觉落差的页面效果时用过，让底层图片固定不动，上面的图层滚动 3.这里顺便提一下让背景图片适应不同浏览器大小 添加属性，就可以对图片进行一个整体的拉伸 bac...
html加背景图片不动,css如何设置背景固定不动？
weixin_28020031的博客
06-04 5089
在前面的经验中，我们知道了怎么用css来设置背景图片，但是鼠标滚动滚轮时，背景图片会随同网页内容一起滚动，怎么才能让背景图片固定不动呢？背景图固定不动，不跟随滚动条滚动：背景附着属性 background-attachmentbody {background-image:url(../images/css_tutorials/background.jpg);background-repeat:no...
html中图片自动循环滚动代码,JavaScript代码实现图片循环滚动效果
weixin_39663258的博客
05-31 4986
1.概述循环滚动图片，不仅可以增添Web页面的动态效果，而且可以节省页面空间，有效地保证在有限的页面中显示更多的图片。2.技术要点主要应用setTimeout()方法实现图片的循环滚动效果。setTimeout()方法的语法格式如下：setTimeout(function,milliseconds,[arguments])参数说明：a. function：要调用的JavaScript自定义函数名称...
自制图片滚动效果的实现与应用
weixin_42561464的博客
08-31 1786
本文还有配套的精品资源，点击获取 简介：图片滚动效果是网页设计中常用元素，能够动态展示图片集，提高视觉吸引力。源码下载提供了基于JavaScript和CSS3的简单自制图片滚动效果，适合开发者在网页或应用中使用。本文将详细探讨实现原理、相关技术及应用场景。通过定时器和事件监听器控制图片显示，HTML和CSS负责样式和布局，而JavaScript处理图片切换逻辑，可能利用 ...
网页设计html图片滚动特效,网站设计｜滚动特效全面讲解！
weixin_32023091的博客
06-09 2793
在视差滚动网页的设计上，无论是移动端还是桌面端，如今的设计师都有了足够深入的探索，并且对于功能和体验上的挖掘，都有了比较成熟的经验。无论是导航悬停式的滚动还是水平滚动和分屏3D特效，视差滚动这一设计趋势已经深刻地影响到了如今的UI设计。今天的我们将要推荐10个颇为值得学习的视差滚动网页设计作品，它们在设计上都有其独到之处。视差滚动特效视差滚动特效是用户在滚动页面的过程当中，页面中不同元素随之进行不...
瀑布流代码，页面滚动时加载图片的网页特效
09-01
瀑布流布局，也被称为Masonry布局，是一种常用于图片展示的网页设计模式，它以其独特的方式使得图片在页面上自适应地排列，形成一种类似瀑布倾泻的效果。当用户滚动页面时，新的图片会逐个加载，这种效果既美观又...
微信小程序实现图片滚动效果示例
10-17
微信小程序实现图片滚动效果的主要技术是利用了微信小程序中的swiper组件。这一组件是一种滑块视图容器，常被用于图片轮播、广告展示等场景。在使用swiper组件时，开发者需要遵循一定的技术规范和注意事项以保证组件...
JS实现图片横向滚动效果示例代码
10-26
在Web开发中，实现图片的横向滚动效果是一种常见的需求，它能够为网页增添动态的视觉效果。从提供的文件内容来看，本文通过一个具体的示例，向读者展示了如何利用JavaScript（简称JS）来实现图片的横向滚动效果。...
JS实现部分HTML固定页面顶部随屏滚动效果
10-23
标题中的“JS实现部分HTML固定页面顶部随屏滚动效果”是指一种常见的网页设计技术，它使得页面的一部分（通常是导航栏或其他重要元素）在用户滚动页面时始终保持在屏幕顶部，这样可以方便用户随时访问这些关键信息，...
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
10-20
在当前的互联网应用中，实现一个元素（如二维码图片）始终固定在网页的某个位置，同时随着页面滚动而移动，是一个常见的前端开发需求。这样的交互能够提供更好的用户体验，比如在用户滚动阅读页面内容时，让关键信息...
第8章利用CSS制作导航菜单
最新发布
KO2131855283的博客
11-12 686
利用CSS为超链接重新设置样式，包括对a:link和a:visited这两个伪类的设置，以此来分别表示超链接未被访问和已被访问的状态，同时将其display属性设为block，这样就能把超链接变成块级元素，进而可以为超链接设置80像素的宽度，满足特定的页面布局需求。与此同时，针对大标题文字的 CSS 样式也要进行设定，这包括规定高度值，设置合适的行高，确定文字颜色（可依据设计风格选择不同色彩）以及文字的对齐方式（如居中对齐、左对齐等），以此来达到理想的视觉呈现效果，提升导航栏和标题的美观度与可读性。
第8章 利用CSS制作导航菜单.
w_wx8866的博客
11-11 638
我们在浏览网页的时候可以看见许多位于顶部的导航栏，供我们点击跳转。
第八章 利用CSS制作导航栏
2302_82150329的博客
11-12 774
为了美化文字内容的外观，可以设置div高度，宽度，背景，边框和文本对齐方式，为了使导航菜单始终处于最上层，需要设置z-index属性的优先值，为了使导航菜单固定于页面底部，需要设置位置属性position和各个方向的位置值。在<nav>的首尾标签之间，使用<div>标签创建菜单范围，结合无序列表<ul>和有序列表<li>标签，配合列表选项<li>创建菜单选项。利用CSS为超链接重新设置样式，例如对a：link，a：visited进行设置，表示链接未被访问和已被访问的状态。这里使用通配符“*”整体设置。
CSS中常见文本居中技巧详解
2301_76541209的博客
11-11 453
在网页设计中，文本居中是非常常见且重要的布局需求之一。无论是为了美观还是为了更好地传达信息，掌握文本居中的方法对于前端开发者来说都是必不可少的技能。本文将详细介绍几种常用的CSS文本居中方法，帮助读者解决实际开发中的问题。
CSS 自定义滚动条样式
2301_76162638的博客
11-12 471
【代码】CSS 自定义滚动条样式。
JavaScript实现右侧图片随滚动条同步滚动效果
"该资源提供了一种使用JavaScript实现右侧图片随鼠标滚动效果的方法，适用于创建类似对联广告的动态展示。图片可以独立关闭，并且代码示例中包含了一个具体的HTML和JS实现。" 在网页设计中，动态效果常常能够吸引...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值