首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在滚动时停止图片移动,css背景位置:固定;

在滚动时停止图片移动可以通过CSS的background-attachment属性来实现。当设置background-attachment: fixed;时,背景图片会固定在视口中的某个位置,不会随页面滚动而移动。

具体的实现步骤如下:

  1. 在HTML文件中,使用<div>元素或其他适当的容器元素来包裹需要设置背景图片的内容。
代码语言:txt
复制
<div class="container">
  <!-- 内容 -->
</div>
  1. 在CSS文件中,为容器元素设置背景图片和其他样式,并将background-attachment属性设置为fixed
代码语言:txt
复制
.container {
  background-image: url("图片地址");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

在上述代码中,将url("图片地址")替换为实际的图片地址。background-repeat: no-repeat;用于禁止背景图片的重复显示,background-size: cover;用于确保背景图片覆盖整个容器。

这样设置后,当页面滚动时,背景图片会保持固定不动,而容器中的内容会随着滚动而移动。

腾讯云相关产品推荐:腾讯云对象存储(COS)

腾讯云对象存储(COS)是一种海量、安全、低成本、高可靠的云存储服务,适用于存储、处理和分发大量非结构化数据,如图片、音视频、文档等。它提供了简单易用的API接口和控制台操作,可以方便地实现图片、音视频等资源的存储和管理。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CSS】盒子模型外边距 ③ ( 插入图片 | 插入图片位置移动 - 修改外边距 | 背景图片 | 背景图片移动位置 - 修改背景位置 background-position )

type="text/css"> img { /* 设置图片大小 */ width: 200px; height: 200px; /* 通过修改 盒子模型 外边距 修改图片显示位置...---- 1、简介 背景图片 : 设置背景图片方式 : 在 CSS 中 , 为 盒子 设置 background 属性 , 设置背景图片 ; /* 设置图片背景 */ background:...背景图片的尺寸 而设置图片大小 ; 设置背景图片显示位置 : 通过修改 背景位置 background-position 修改图片显示位置 ; 代码示例 : div { /* 设置盒子大小..., 使用 background: pink url(images/image.jpg) no-repeat; CSS 样式 , 设置背景图片 , 通过修改 背景位置 background-position...修改图片显示位置 /* 通过修改 背景位置 background-position 修改图片显示位置 */ background-position: 50px 50px; 来设置图片位置

1.6K10

CSS固定背景图片不跟随浏览器的滚动

看过很多博客、微博和QQ空间里面,很多人都给自己的小窝设置了固定背景,不随浏览器滚动,实现的方法除了Javascript,CSS也可以轻松实现。 ?...background不随浏览器滚动的代码如下: CSS代码 body {background:url(背景图片地址) no-repeat fixed center top;margin:0;padding...:0;} 只需要一个核心代码就实现了背景不随浏览器滚动,兼容了IE6+浏览器, 其核心代码为:background-attachment: fixed; 无论滚动条如何拖动,背景图片始终牢牢固定在页面上...如果你用其他的方法不能解决IE6背景不随浏览器滚动,不妨试试上面的CSS代码,或者用下面的JS来解决。...IE6浏览器实现背景不随浏览器滚动的代码: JavaScript代码 var scrollBackground = true;</script

1.4K10

滚动视差?CSS 不在话下

也就是说,背景图从一开始就已经被固定死在初始所在的位置。...而滚动视差效果,正是不按常理出牌的一个效果,重点来了: 当页面滚动图片应该出现的位置,被设置了 background-attachment: fixed 的图片并不会继续跟随页面的滚动而跟随上下移动,...CodePen Demo 结合这张 GIF,相信能对 background-attachment: fixed 有个更深刻的认识,移动的只有视口,而背景图是一直固定死的。...: fixed 实现图片点击水纹效果 利用图片相对视口固定,可以有很多有趣的效果,譬如下面这个,来源于这篇文章CSS Water Wave (水波效果): CodePen Demo -- bg-attachment...CodePen Demo -- CSS 3D parallax 很明显,当滚动滚动,不同子元素的位移程度从视觉上看是不一样的,也就达到了所谓的滚动视差效果。

1.7K30

滚动视差?CSS不在话下

也就是说,背景图从一开始就已经被固定死在初始所在的位置。...而滚动视差效果,正是不按常理出牌的一个效果,重点来了: 当页面滚动图片应该出现的位置,被设置了 background-attachment: fixed 的图片并不会继续跟随页面的滚动而跟随上下移动,...CodePen Demo 结合这张 GIF,相信能对 background-attachment: fixed 有个更深刻的认识,移动的只有视口,而背景图是一直固定死的。...: fixed 实现图片点击水纹效果 利用图片相对视口固定,可以有很多有趣的效果,譬如下面这个,来源于这篇文章CSS Water Wave (水波效果): ?...CodePen Demo — CSS 3D parallax 很明显,当滚动滚动,不同子元素的位移程度从视觉上看是不一样的,也就达到了所谓的滚动视差效果。

1.3K20

前端-滚动视差?CSS 不在话下

fixed 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素的内容滚动。 这里的关键在于,即使一个元素拥有滚动机制,背景也不会随着元素的内容滚动。...也就是说,背景图从一开始就已经被固定死在初始所在的位置。...而滚动视差效果,正是不按常理出牌的一个效果,重点来了: 当页面滚动图片应该出现的位置,被设置了 background-attachment: fixed 的图片并不会继续跟随页面的滚动而跟随上下移动,...: fixed 实现图片点击水纹效果 利用图片相对视口固定,可以有很多有趣的效果,譬如下面这个,来源于这篇文章CSS Water Wave (水波效果): ?...CodePen Demo — CSS 3D parallax(https://codepen.io/Chokcoco/pen/EpOeRm) 很明显,当滚动滚动,不同子元素的位移程度从视觉上看是不一样的

1.5K30

滚动视差?CSS 不在话下

何为视差滚动 视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。 作为网页设计的热点趋势,越来越多的网站应用了这项技术。...fixed 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素的内容滚动。 这里的关键在于,即使一个元素拥有滚动机制,背景也不会随着元素的内容滚动。...也就是说,背景图从一开始就已经被固定死在初始所在的位置。...而滚动视差效果,正是不按常理出牌的一个效果,重点来了: 当页面滚动图片应该出现的位置,被设置了 background-attachment: fixed 的图片并不会继续跟随页面的滚动而跟随上下移动,...,效果如下: [css3dparallax] 很明显,当滚动滚动,不同子元素的位移程度从视觉上看是不一样的,也就达到了所谓的滚动视差效果。

1.9K80

CSSCSS 总结 ③ ( CSS 背景设置 | 背景颜色 | 背景图片 | 背景图片平铺样式 | 背景图片位置 | 超大背景图片设置 | 背景附着 | 背景样式简写 | 背景半透明 ) ★

Y 轴方向上平铺 ; 4、背景图片位置 如果 盒子的大小 大于 背景图片的大小 , 默认的 图片 位置是 左上角 ; 设置背景位置CSS 语法如下 : background-position...网页背景兼容问题 在网站开发 , 经常遇到 网站首页使用超大背景图片显示 的情况 , : 背景图片 使用 1920 x 1080 像素的图片 ; 每个人的电脑分辨率不同 , 有的电脑的分辨率可能没有...背景附着 用于设置 背景图片 是 可滚动的 还是 固定的 ; 使用 背景附着 的前提也是必须 提前设置 背景图片 , 背景图片设置语法如下 : background-image: url(images...fixed 二选一 ; scroll : 背景图像 与 网页内容 绑定 , 网页滚动 , 背景图像也进行滚动 ; fixed : 背景图像 固定 , 滚动网页 , 背景图像位置保持不变 ; 7、背景样式简写...使用 CSS 样式设置 盒子 背景 , 需要 设置多个 CSS 样式 , 设置 背景图片 , 平铺模式 , 定位方式 , 附着方式 等 , 下面是一个完整的图片背景设置的代码 , 代码很繁琐 ;

1.7K10

IT课程 CSS基础 023_图片背景

通过设置块级元素,可使一行只显示一张图片。通过设置行内元素,可使一行显示多张图片。会计元素布局位置使用 margin 属性,行内元素布局位置使用 text-align 属性。...(大小) 通过 background-size 属性设置背景图片的尺寸,可以是具体的像素值、百分比,也可以使用关键字 cover 或 contain。...通过 background-position 属性设置背景图片的起始位置,可以使用像素值、百分比,也可以使用关键字。...(固定) 通过 background-attachment 属性设置背景图片是否固定或者随着内容滚动。...scroll:背景图片随网页滚动移动(默认) fixed:背景图片不会随网页滚动移动 local: 背景图片会随着元素内容的滚动滚动

8610

CSS基础-背景属性:颜色、图片、重复

避免:使用rgba()设置背景,确保仅改变背景而不影响子元素透明度。...常见问题与避免策略 问题:图片尺寸与元素尺寸不匹配导致失真或拉伸。 避免:使用background-size属性控制图片缩放,cover使图片覆盖整个容器,contain使图片完整显示在容器内。...background-repeat) 此属性控制背景图片何在水平和垂直方向上重复。...、综合示例:背景复合属性 CSS允许使用background属性一次性设置所有背景相关的属性,顺序为:颜色、图片、重复、位置、大小、附件。...,还叠加了一张图片作为背景图片居中显示,且根据容器大小缩放以完全覆盖,固定图片位置以创建滚动效果。

14510

CSS入门?一篇就够了!

CSS以HTML为基础,提供了丰富的功能,字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。 引入CSS样式表(书写位置CSS可以写到那个位置?...背景固定还是滚动 背景的合写(复合属性) background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 背景图片(image) 语法: background-image : none...背景附着 语法: background-attachment : scroll | fixed 参数: scroll :  背景图像是随对象内容滚动 fixed :  背景图像固定 说明: 设置或检索背景图像是随对象内容滚动还是固定的...不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化,该元素都会始终显示在浏览器窗口的固定位置固定定位有两点: 固定定位的元素跟父亲没有任何关系,只认浏览器。...固定定位完全脱标,不占有位置,不随着滚动滚动。 叠放次序(z-index) 当对多个元素同时设置定位,定位元素之间有可能会发生重叠。

5.2K20

CSS 背景(background)

CSS 可以添加背景颜色和背景图片,以及来进行图片设置。...背景固定还是滚动 背景的合写(复合属性) background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 背景图片(image) 语法: background-image : none...语法: background-attachment : scroll | fixed 参数: scroll :  背景图像是随对象内容滚动 fixed :  背景图像固定 说明: 设置或检索背景图像是随对象内容滚动还是固定的...为了可读性,建议大家如下写: background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 background: transparent url(image.jpg) repeat-y  ...背景缩放(CSS3) 通过background-size设置背景图片的尺寸,就像我们设置img的尺寸一样,在移动Web开发中做屏幕适配应用非常广泛。

2.1K20

从头学前端-CSS基础02

背景背景样式可以设置背景颜色,背景图片背景平铺,背景图片位置背景图片固定背景颜色: backgroud-color 默认是透明色;> 背景颜色半透明效果: background: rgba(0,0,0,0.1...) > 透明属性取值范围:0-1背景图片: background-image: 用于logo或者一些小图片和超大图片,可以方便控制图片位置;语法如下:> backgroud-image: none |...| repeat-y背景图片位置:background-position > 参数可以是方位名词:left top center bottom right 一般情况下需要两个参数。...,第一个参数为X轴,第二值为Y轴背景图片固定:background-attachment设置背景图片是否随着页面滚动> background-attachment: fixed | scroll> 默认值...scoll.随着对象内容的滚动移动背景复合写法:background> 对于顺序没有要求,一般写法为:背景颜色,背景图片 背景平铺,背景图片滚动背景图片位置 > 各个属性以空格隔开CSS三大特性CSS

72320

面试题整理|45个CSS面试题

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中。...再利用CSS的”background-image”,“background-repeat”,”background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片位置...用于控制图像滚动的属性是什么? background-attachment:该属性设置背景图像是随页面其余部分滚动还是固定滚动。...这些元素不会影响其他元素的位置固定 fixed 将元素从页面流中移除,并将其放置在相对于视口的指定位置,并且在滚动不会移动。 粘性sticky 粘性定位是相对定位和固定定位的混合。...将该元素视为相对位置,直到它超过指定的阈值为止,此时将其视为固定位置。 Q41、什么是供应商前缀?

4.1K30

CSS背景图像,镜像翻转、缩放、背景偏移与定位、文字溢出处理

背景图片 相关CSS背景图片background:url(logo.png)no-repeat;背景图片大小缩放: 宽 高background-size:100%100%;绝对定位position:absolute...: pointer;background-attachment用来设置背景图片是否随页面一起滚动可选值:不随窗口滚动图片,我们一般都是设置给body,而不设置给其他元素background-attachment...: fixed;scroll,默认值,背景图片随着窗口滚动fixed,背景图片固定在某一位置,不随页面滚动背景图像偏移, 如下: 水平(宽度.左右平移) 垂直(高度.上下)background-position...: -50px -50px;背景图片默认是贴着元素的左上角显示通过background-position可以调整背景图片在元素中的位置 可选值:该属性可以使用 top right left bottom...,则图片会向右移动指定的像素如果指定的是一个负值,则图片会向左移动指定的像素 第二个是垂直偏移量如果指定的是一个正值,则图片会向下移动指定的像素如果指定的是一个负值,则图片会向上移动指定的像素css处理文字不换行

16.7K10

CSS笔记(6)

CSS笔记(6) 上一节的背景图片位置还没写完就匆匆发表了,现在接着后面的内容....背景图像固定(背景附着) background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动....fixed 背景图像固定 背景复合写法 为了简化背景属性的代码,我们可以将这些属性合并简写在同一个属性background中,从而节约代码量.当我们使用简写属性,没有特定的书写顺序,一般习惯的约定顺序为...: background : transparent url(img.jpg) repeat-y fixed top; 背景颜色 图片地址 图片平铺 是否滚动 图片位置 CSS背景 背景色半透明...(背景滚动)/fixed(背景固定) 背景简写 书写更简单 背景颜色 图片地址 背景平铺 背景滚动 背景位置 背景半透明 背景颜色半透明 background:rgba(0, 0, 0,alpha);

49410

背景属性

直到背景能覆盖元素的所有区域             3.contain                 包含 将背景图等比缩放                 直到背景图像碰到右边或者下边...,停止缩放                 导致图片显示不全          div{width:800px;     height:300px;     border:1px solid...,定位位置,和背景重复  7.背景图片固定         属性:             background-attachment:         取值             1.fixed:背景固定不动...fixed背景固定,p标签内容滑动*/ /*取值:scroll背景固定,p标签内容滑动*/ background-repeat: no-repeat; }    使用:在css样式中写入body标签内的样式先确定背景图片位置背景固定...背景缩写 background:url() repeat positon;  8.CSS sprites css雪碧         css精灵

42830

滚动视差让你不相信“眼见为实”

引言 视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果。 其实,这项技术早在 2013 年就已经开始在一些国外的网站中得到了大量的应用。...说的简单点就是,滚动屏幕,网页中元素的位置会发生变化。但是不同的元素位置变化的速度不同,导致网页中产生分层元素的错觉。 看完上面这段,相信你对视差滚动的概念已经有了一个初步的了解。...background-attachment CSS 属性决定背景图像的位置是在视口内固定,还是随着包含它的区块滚动。 它一共有三个属性: fixed: 键字表示背景相对于视口固定。...即使一个元素拥有滚动机制,背景也不会随着元素的内容滚动。 local: 此关键字表示背景相对于元素的内容固定。如果一个元素拥有滚动机制,背景将会随着元素的内容滚动。...scroll: 此关键字表示背景相对于元素本身固定, 而不是随着它的内容滚动

2.1K76

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券