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

原创已于 2022-05-22 23:04:05 修改 · 390 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

于 2022-05-09 09:51:27 首次发布

本文介绍了如何使用CSS实现背景图片固定效果，使背景在页面滚动时保持不动。通过设置`background-image`, `background-size`, `background-attachment`属性，可以创建一个背景图片在页面滚动时固定不动的效果，适用于网站设计和前端开发。

body {

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

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

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

}

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

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

lsbdgyd

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

瀑布流代码，页面滚动时加载图片的网页特效

09-01

瀑布流布局，也被称为Masonry布局，是一种常用于图片展示的网页设计模式，它以其独特的方式使得图片在页面上自适应地排列，形成一种类似瀑布倾泻的效果。当用户滚动页面时，新的图片会逐个加载，这种效果既美观又...

微信小程序实现图片滚动效果示例

10-17

微信小程序实现图片滚动效果的主要技术是利用了微信小程序中的swiper组件。这一组件是一种滑块视图容器，常被用于图片轮播、广告展示等场景。在使用swiper组件时，开发者需要遵循一定的技术规范和注意事项以保证组件...

参与评论您还未登录，请先登录后发表或查看评论

css background设置背景图片不随滚动条滚动

zhangzuruiqqq的博客

07-26

494

/背景图片不随内容滚动。

第一屏层固定位置，滚动页面层固定在源位置

weixin_30443731的博客

02-13

205

第一屏层固定位置，滚动页面层固定在源位置 var top = $(document).scrollTop(); if (($.browser.msie == true) && ($.browser.version == 6.0)) { if (top > 430) $("#nav...

前端页面--在上下滑动时,背景图片不动

weixin_52268321的博客

09-01

833

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

5286

在前面的经验中，我们知道了怎么用css来设置背景图片，但是鼠标滚动滚轮时，背景图片会随同网页内容一起滚动，怎么才能让背景图片固定不动呢？背景图固定不动，不跟随滚动条滚动：背景附着属性 background-attachmentbody {background-image:url(../images/css_tutorials/background.jpg);background-repeat:no...

html上下滚动效果图片,JS实现长图上下滚动效果

weixin_34522296的博客

06-03

1459

本文实例为大家分享了JS实现长图上下滚动的具体代码，供大家参考，具体内容如下案例描述将一张长图放在某一固定长宽的盒子里，当鼠标置于盒子的上半部分时，图片向下滑直到到达图片的底部停止；当鼠标置于盒子的下半部分时，图片向上滑直到到达图片的顶部停止。案例图示HTML CSSCSS不作过多解释，详解请看注释部分//通用样式* {margin: 0;padding: 0;}#box {width: 750p...

自制图片滚动效果的实现与应用

weixin_42561464的博客

08-31

2179

本文还有配套的精品资源，点击获取简介：图片滚动效果是网页设计中常用元素，能够动态展示图片集，提高视觉吸引力。源码下载提供了基于JavaScript和CSS3的简单自制图片滚动效果，适合开发者在网页或应用中使用。本文将详细探讨实现原理、相关技术及应用场景。通过定时器和事件监听器控制图片显示，HTML和CSS负责样式和布局，而JavaScript处理图片切换逻辑，可能利用 ...

HTML图片无缝滚动效果的实现技巧

weixin_42602368的博客

05-09

1282

无缝滚动是网页设计中一种常见的动画效果，它能够给用户带来流畅的视觉体验。实现无缝滚动需要满足一些技术要求，并采取特定的动态内容更新策略。

JS实现部分HTML固定页面顶部随屏滚动效果

10-23

标题中的“JS实现部分HTML固定页面顶部随屏滚动效果”是指一种常见的网页设计技术，它使得页面的一部分（通常是导航栏或其他重要元素）在用户滚动页面时始终保持在屏幕顶部，这样可以方便用户随时访问这些关键信息，...

JS实现图片横向滚动效果示例代码

10-26

在Web开发中，实现图片的横向滚动效果是一种常见的需求，它能够为网页增添动态的视觉效果。从提供的文件内容来看，本文通过一个具体的示例，向读者展示了如何利用JavaScript（简称JS）来实现图片的横向滚动效果。...

基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动

10-20

在当前的互联网应用中，实现一个元素（如二维码图片）始终固定在网页的某个位置，同时随着页面滚动而移动，是一个常见的前端开发需求。这样的交互能够提供更好的用户体验，比如在用户滚动阅读页面内容时，让关键信息...

PaperStudio：WYSIWYG文档的Web实现——从CSS Print到客户端PDF生成的技术解析

xinyu_Jina的博客

12-15

636

通过精确控制页面布局、利用 SVG/Canvas 进行高保真渲染，并结合客户端库实现安全的 PDF 导出，这类工具成功地将传统的桌面级排版功能带到了 Web 平台。它将复杂的 CSS Print 规则和 PDF 生成逻辑，封装在了一个用户友好的交互界面中。将 CSS Print 规范、矢量渲染和客户端 PDF 生成技术结合，使得 Web 应用具备了媲美桌面级软件的文档处理能力。等客户端库，在不依赖后端服务器的情况下，将动态生成的 DOM 结构安全、高效地转换为高质量的 PDF 文档。

tailwindcss：安装避坑，从 0 到项目跑通

qq_45796592的博客

12-17

903

本文详细介绍了TailwindCSS v3.4.x的安装配置流程及优化技巧。首先说明了官方文档在实际操作中可能遇到的问题，强调了核心依赖tailwindcss、postcss和autoprefixer的重要性。接着详细讲解了配置文件的生成和修改方法，包括自定义颜色配置和效果验证。文章还分享了优化方案，提供了一个cs工具方法来提升类名编写的可读性。最后推荐了VSCode插件TailwindCSS IntelliSense来增强开发体验。

CSS mix-blend-mode 实现元素融合效果

小小•愿望的博客

12-17

506

CSS的mix-blend-mode属性可实现元素内容与背景的颜色混合，提供多种混合模式如multiply（正片叠底）、screen（滤色）、difference（差值）等，类似Photoshop图层效果。其中difference模式能根据背景色自动调整文字颜色，如白色文字在黑色背景保持白色，在白色背景变为黑色，解决文字与背景色冲突问题。该属性兼容现代浏览器，适用于动态色彩适配场景，示例展示了不同背景色下文字自动反色的效果。

html+css基础：07、css2的复合选择器_伪类选择器(概念、动态伪类、结构伪类(核心)、否定伪类、UI伪类、目标伪类、语言伪类)及伪元素选择器

狮子座的男孩

12-15

594

本文介绍了CSS中多种伪类选择器的概念和应用。主要包括：1）伪类选择器的基本概念，通过a:link和a:visited示例说明元素特殊状态的样式控制；2）动态伪类选择器，展示链接在不同状态（未访问、悬停、激活、已访问）下的样式变化；3）结构伪类选择器，详细解析first-child、last-child、nth-child等选择器的使用方法和效果，包括按兄弟元素和同类型兄弟元素计算的不同应用场景。通过多个HTML结构和对应的CSS样式示例，直观展示了各类伪类选择器的实际应用效果。

Vue 3 的魔法：用 v-bind() 让 CSS 爱上 TypeScript 常量

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

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