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

多个背景css图像(一个是固定的,另一个是滚动的)全部显示为滚动

多个背景CSS图像全部显示为滚动可以通过CSS的background-attachment属性来实现。background-attachment属性用于指定背景图像的滚动方式。

首先,我们需要将背景图像设置为滚动的。可以使用以下CSS代码:

代码语言:css
复制
.background-scroll {
  background-image: url('固定的背景图像地址');
  background-repeat: no-repeat;
  background-attachment: scroll;
}

上述代码中,.background-scroll是一个CSS类名,你可以根据实际情况进行命名。background-image属性用于指定背景图像的URL地址,background-repeat属性用于设置背景图像是否重复显示,这里设置为no-repeat表示不重复显示。background-attachment属性设置为scroll表示背景图像会随着页面滚动而滚动。

接下来,我们需要添加滚动的背景图像。可以使用以下CSS代码:

代码语言:css
复制
.background-scroll {
  background-image: url('固定的背景图像地址'), url('滚动的背景图像地址');
  background-repeat: no-repeat, repeat-y;
  background-attachment: scroll, scroll;
}

上述代码中,我们使用逗号分隔了两个背景图像的URL地址。第一个URL地址是固定的背景图像,第二个URL地址是滚动的背景图像。background-repeat属性设置为no-repeat, repeat-y,表示第一个背景图像不重复显示,第二个背景图像在垂直方向上重复显示。background-attachment属性设置为scroll, scroll,表示两个背景图像都会随着页面滚动而滚动。

这样,多个背景CSS图像就可以全部显示为滚动了。

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

腾讯云对象存储(COS)是一种安全、低成本、高可靠的云存储服务,适用于存储大量非结构化数据,如图片、音视频、文档等。您可以将固定的背景图像和滚动的背景图像上传到腾讯云对象存储,并通过腾讯云的API进行访问和管理。

了解更多关于腾讯云对象存储(COS)的信息,请访问:腾讯云对象存储(COS)产品介绍

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

相关·内容

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笔记(6)

背景图像固定(背景附着) background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动....background-attachment后期可以制作视差滚动效果. background-attachment: scroll | fixed 参数 作用 scroll 背景图像是随着对象内容滚动...fixed 背景图像固定 背景复合写法 为了简化背景属性代码,我们可以将这些属性合并简写在同一个属性background中,从而节约代码量.当我们使用简写属性时,没有特定书写顺序,一般习惯约定顺序...CSS我们提供了背景半透明效果 background : rgba (0, 0, 0, 0.3) ; 最后一个参数是alpha透明度,取值范围在0~1之间,越低透明度越高 背景总结 属性...(背景滚动)/fixed(背景固定) 背景简写 书写更简单 背景颜色 图片地址 背景平铺 背景滚动 背景位置 背景半透明 背景颜色半透明 background:rgba(0, 0, 0,alpha);

49810
  • 程序猿必备10款web前端动画插件二

    1.菜单悬停效果展示 一些菜单链接悬停效果灵感。由CSS和JavaScript单个字母动画提供支持。今天,我们希望与您分享一些菜单悬停效果。...有很多可能动画片段,所以我们做了一些演示,显示不同效果。动画由anime.js提供支持。 3.CSS网格布局幻灯片 每个幻灯片都有一个单独CSS网格布局和浏览时显示效果。...我们希望与您分享一个由CSS网格支持幻灯片。这个想法是以艺术方式显示几个图像,并为每张幻灯片应用不同布局。在幻灯片之间浏览时,我们还会播放显示和隐藏项目的显示效果。...玩过一些滚动变形背景形状后,我们想在这个演示中探索一些悬停效果。通过变换SVG路径,我们可以在悬停上创建一些有机,飘逸动作。在SVG上这样做clipPath可以让我们在图像上使用这种效果。...这个想法是在滚动上创建一个装饰性SVG形状。根据我们当前正在查看部分,形状将变形不同形式。

    5.3K70

    滚动视差?CSS 不在话下

    background-attachment: fixed fixed 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素内容滚动。...注意一下 scroll 与 fixed,一个是相对元素本身固定一个是相对视口固定,有点类似 position 定位 absolute 和 fixed。...fixed 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素内容滚动。 这里关键在于,即使一个元素拥有滚动机制,背景也不会随着元素内容滚动。...也就是说,背景图从一开始就已经被固定死在初始所在位置。...好,我们再来试一下,如果把所有 .g-word 内容区块都去掉,只剩下全部设置了 background-attachment: fixed 背景图区块,会是怎么样呢?

    1.7K30

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

    background-attachment: fixed fixed 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素内容滚动。...注意一下 scroll 与 fixed,一个是相对元素本身固定一个是相对视口固定,有点类似 position 定位 absolute 和 fixed。...fixed 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素内容滚动。 这里关键在于,即使一个元素拥有滚动机制,背景也不会随着元素内容滚动。...好,我们再来试一下,如果把所有 .g-word 内容区块都去掉,只剩下全部设置了 background-attachment: fixed 背景图区块,会是怎么样呢?...,移动只有视口,而背景图是一直固定

    1.6K30

    滚动视差?CSS不在话下

    background-attachment: fixed fixed 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素内容滚动。...注意一下 scroll 与 fixed,一个是相对元素本身固定一个是相对视口固定,有点类似 position 定位 absolute 和 fixed。...fixed 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素内容滚动。 这里关键在于,即使一个元素拥有滚动机制,背景也不会随着元素内容滚动。...也就是说,背景图从一开始就已经被固定死在初始所在位置。...好,我们再来试一下,如果把所有 .g-word 内容区块都去掉,只剩下全部设置了 background-attachment: fixed 背景图区块,会是怎么样呢?

    1.3K20

    滚动视差?CSS 不在话下

    background-attachment: fixed fixed 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素内容滚动。...注意一下 scroll 与 fixed,一个是相对元素本身固定一个是相对视口固定,有点类似 position 定位 absolute 和 fixed。...fixed 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素内容滚动。 这里关键在于,即使一个元素拥有滚动机制,背景也不会随着元素内容滚动。...好,我们再来试一下,如果把所有 .g-word 内容区块都去掉,只剩下全部设置了 background-attachment: fixed 背景图区块,会是怎么样呢?...,移动只有视口,而背景图是一直固定

    1.9K80

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

    ; 如果 电脑分辨率高于图片分辨率 , 则显示全部内容 , 并且外面还有空白边框存在 ; 超大背景图片推荐定位 因此这里要设置图片背景位置 , 一般超大背景图片背景定位都使用 background-position...; 超大背景图片编辑策略 图片编辑策略 : 在高分辨率电脑上可以显示全部内容 , 在低分辨率电脑上只能显示下图红色矩形框中内容 , 这里建议 将图片核心内容放在 图片中心偏上位置 ,...: scroll 或 fixed 二选一 ; scroll : 背景图像 与 网页内容 绑定 , 网页滚动时 , 背景图像也进行滚动 ; fixed : 背景图像 固定 , 滚动网页时 , 背景图像位置保持不变...; 7、背景样式简写 使用 CSS 样式设置 盒子 背景时 , 需要 设置多个 CSS 样式 , 设置 背景图片 , 平铺模式 , 定位方式 , 附着方式 等 , 下面是一个完整图片背景设置代码...(0, 0, 0, .2); 背景半透明 指的是 盒子背景设置半透明 , 可以看到下面的内容 , 盒子里面显示内容不受背景影响 , 照常显示 ;

    2.2K10

    聊聊苹果营销页中几个有趣交互动画

    ❞ 两个效果 翻盖效果 一个是屏幕慢慢打开效果,在屏幕打开过程中,「电脑图片」 是在屏幕中固定不动,直到打开完毕或者关闭完毕时候再让 「电脑图片」 随着滚动滚动。 ?...❞ 常用例子 在业务中我们可能会遇到这样一种场景:即一个列表,列表中数据需要根据时间显示,而且时间需要在滚动时候固定在最顶部,这个时候我们就可以使用 sticky 来解决这个问题: ?...「视差滚动」(Parallax Scrolling)是指让多层背景以不同速度移动,形成立体运动效果,带来非常出色视觉体验。...Canvas 实现 Canvas 实现是将屏幕中显示这张图片由 Canvas 来画。 思路 其实这个动画有两部分组成,一个是 「图片覆盖」,一个是 「图片缩小」。...图片覆盖 这里我们需要将两张图片都设置背景图片,同时我们需要给第二张图片套上 电脑外壳图片。

    1.9K60

    对html与body一些研究与理解

    ,其background背景色被浏览器俘获,浏览器界面背景background背景色,以上是我推论,这种推论不是我凭空想象出来,而是有一定根据。...此图标签背景全屏显示也进一步证明了我上面有关背景显示原理推论。.../image/404.png) no-repeat fixed center center;} div{height:2000px;} 结果IE6下,背景固定了,只看到背景图片随着滚动条上下移动而移动...而这个透明层就使用绝对定位且与这个平级,高宽100%显示,就可以使得无论怎么滚动这个透明覆盖层都是满屏显示。这其实也就解决IE6下浮动层固定定位经典方法。...我见过有关和标签hack有这么几个,一个是* html body,一个是*+html,还有个是html > body,以及body:nth-of-type(1)。

    2.1K30

    接口测试平台代码实现23:项目列表收尾

    项目列表:(这里显示全部项目...,您可以进入他人项目中查看) 效果如下: 然后我们美化一下这俩个按钮,我们可以在head中新建一个style,来控制全页面的按钮css样式。...随便起了个.btn, 这样具体元素中就可以用class = "btn" 来套用这里样式了。 然后我们试着在.btn{} 里添加一个 背景颜色。...当然我们可以改样式: 一个是常用成功按钮,一个是常用危险按钮。看看效果: bootstrap3是一个方便 css库 让我们可以直接简单套用很多流行样式。...我这里直接就放在 顶部中间了,位置要固定跟随屏幕滚动,这样当列表太多用户在滚动到下方时候,依然可以直接点击新增项目按钮。

    25730

    css属性详解

    padding:           用于控制内容与边框之间距离;    Border(边框):     围绕在内边距和内容外边框。 Content(内容):   盒子内容,显示文本和图像。...hidden 内容会被修剪,并且其余内容是不可见。 scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余内容。 auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余内容。...fixed(固定) fixed:对象脱离正常文档流,使用top,right,bottom,left等属性以窗口参考点进行定位,当出现滚动条时,对象不会随着滚动。...这 是一个常识性知识点,因为这是两个不同流,一个是浮动流,另一个是“定位流”。但是 relative 却可以。因为它原本所占空间仍然占据文档流。...在理论上,被设置fixed元素会被定位于浏览器窗口一个指定坐标,不论窗口是否滚动,它都会固定在这个位置。

    2K101

    响应式图像

    一、固定宽度图像:基于设备像素比选择   srcset属性列出了浏览器可以选择加载图像池,是一个由逗号分隔列表。...需要注意是,源图尺寸值不能使用百分比,vw是唯一可用CSS单位。...在viewport宽度小于960像素时,使图像宽度viewport宽度75%。当viewport大于960像素时,使图像宽度640像素。 vm ? 当处理宽度时候,%单位更合适。...如果页面延伸超过视口高度——滚动条出现——视窗宽度将会大于html元素宽度。 因此,如果你将一个元素设置100vw,这个元素将会延伸到html和body元素范围之外。...滚动问题也不是一个问题,因为现在大多数页面通常不会有水平滚动条。 vh应用 全屏背景图片 vh单位一个典型用途是用来创建一个横跨整个屏幕高度和宽度背景图片,不管设备大小。

    2.5K10

    css属性及定位操作

    padding: 用于控制内容与边框之间距离; Border(边框): 围绕在内边距和内容外边框。 Content(内容): 盒子内容,显示文本和图像。...hidden 内容会被修剪,并且其余内容是不可见。 scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余内容。 auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余内容。...fixed(固定) fixed:对象脱离正常文档流,使用top,right,bottom,left等属性以窗口参考点进行定位,当出现滚动条时,对象不会随着滚动。...这 是一个常识性知识点,因为这是两个不同流,一个是浮动流,另一个是“定位流”。但是 relative 却可以。因为它原本所占空间仍然占据文档流。...在理论上,被设置fixed元素会被定位于浏览器窗口一个指定坐标,不论窗口是否滚动,它都会固定在这个位置。 <!

    2.4K50

    Web前端上万字知识总结

    下面是自己学HTML+DIV+CSS+JS时学习笔记,给大家分享以下,相互学习。大二时候寒假在家无聊时候想做点事,总结了一下web前端基础东西,下面的每个字都是自己手敲。   ...)     Size:设置大小(属性值从1——7,从小到大)     Color;字体颜色(值十六进制颜色)   (3) :设定显示在浏览器左上方标题内容   属性:     Dir:...: 页面的背景图像(所需是图片URL)     (4)、bgproperties: 页面的背景图片是否固定(其只有一个值fixed,设为Fixed后图像不会随着滚动滚动而动)     (5)、link...    属性:type     name      id    value 13、表单:   表单由一个或多个文本输入框、可单击按钮、多选框、下拉菜单和图像按钮等组成,所有的这些都放在中...  no-repeat不平铺     Background-position:    value 以百分比(x%.y%)或绝对值形式(x.y)来确定背景图像位置        top 居顶

    3.7K100

    CSS显示模式

    CSS显示模式 块元素 独占一行 高度,宽度,外边距以及内边距都能控制 宽度默认是100% 是一个容器及盒子,里面可以放行内或者块级元素 行内元素 一行可以显示多个 宽高无法设置 默认高度是本身内容宽度...行内元素只能容纳文本或行内元素 行内块元素 宽高可调 一行多个 默认高度是本身内容宽度 CSS模式转化 行内元素转块级元素:display: block; 块元素转化为行内元素:display:inline...y 如果只写一个参数那就是x值,y默认为垂直居中 背景位置-混合单位 background-position: 20px center 同样第一个对应x值,第二个对应y背景固定 用background-attachment...来实现 参数 作用 scroll 背景随对象内容滚动 fixed 背景图像固定 注意:默认值是scroll 背景属性复合写法: background:背景颜色 背景图片地址 背景平铺 背景图像滚动...position 分别是x,y坐标 background-attachment 背景固定 scroll/fixed 背景半透明 实现半透明 rgba(rgba代码)a透明度

    81000
    领券