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

向下滚动页面时背景图片高度不是100%

的原因是,背景图片的高度默认是根据内容的高度来自适应的,而不是根据页面的高度来自适应。如果希望背景图片的高度始终保持100%,可以通过CSS样式来实现。

一种常见的方法是使用CSS的background-size属性来设置背景图片的尺寸。可以将background-size设置为cover,这样背景图片会被拉伸或压缩以适应容器的尺寸,保持图片的宽高比例不变,直到完全覆盖容器。例如:

代码语言:css
复制
body {
  background-image: url("背景图片的URL");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

上述代码中,将背景图片的URL替换为实际的图片链接。background-size设置为cover表示背景图片会被拉伸或压缩以适应容器的尺寸。background-repeat设置为no-repeat表示不重复平铺背景图片。background-attachment设置为fixed表示背景图片固定在视口中,不随页面滚动而滚动。

另一种方法是使用CSS的background-attachment属性来设置背景图片的滚动方式。可以将background-attachment设置为fixed,这样背景图片会固定在视口中,不随页面滚动而滚动。例如:

代码语言:css
复制
body {
  background-image: url("背景图片的URL");
  background-repeat: no-repeat;
  background-attachment: fixed;
}

上述代码中,将背景图片的URL替换为实际的图片链接。background-repeat设置为no-repeat表示不重复平铺背景图片。background-attachment设置为fixed表示背景图片固定在视口中,不随页面滚动而滚动。

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

腾讯云对象存储(COS)是一种安全、高可靠、低成本的云端存储服务,适用于存储和处理各种非结构化数据,如图片、音视频、文档等。它提供了简单易用的API接口和控制台管理界面,可以方便地进行文件的上传、下载、管理和访问控制。腾讯云对象存储具有高可靠性、高可用性、高性能和低成本的特点,适用于各种场景,如网站托管、移动应用、大数据分析等。

腾讯云对象存储产品介绍链接地址:https://cloud.tencent.com/product/cos

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

相关·内容

CSS的奇淫技巧

; border-radius:100px /50px; background-color:red; } 分别使圆角的半径为宽度和高度的一半。...但是,对于一些表示竖向距离的属性,例如padding-top,padding-bottom,margin-top,margin-bottom等,当按百分比设定它们,依据的也是父容器的宽度,而不是高度。...background-attachment属性用于设置背景图片决定背景是在视口中固定的还是随包含它的区块滚动的。 而fixed属性值就是表示背景图片不随容器一起滚动,而是相对于视口固定。...这样的话在我们向下滑动页面,容器及其内容是向上滚动的,但其背景图片却是固定的,造成一种视差滚动的效果。...; height:100vh; color:#fff; font-size:40px; text-align:center; /*背景图片相关属性设置*/ background-repeat

2.7K120

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.6K10

CSS | 视差滚动 | 笔记

如果一个元素拥有滚动机制,背景将会随着元素的内容滚动,并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。...scroll 背景相对于元素本身固定,而不是随着它的内容滚动(对元素边框是有效的)。 对父元素 css_demo 设置 overflow: scroll, 当元素内容超出页面滚动。...示例-1 预览 image-2023-7-20-15-05-40 向下滚动,会发现就图片移动速度而言,图1 > 图2 > 图3, 这是因为这些图片离你的距离:图1 < 图2 < 图3, 图1 离你最近...结果是,当地址栏可见,屏幕的底部部分将被切断,从而破坏了100vh的初衷。 如下所示: 当地址栏可见,由于移动浏览器不正确地将100vh设置为屏幕高度而没有显示地址栏, 因此屏幕底部被切断。...当页面加载,将高度设置为 window.innerHeight 将正确地将高度设置为窗口的可见部分。 如果地址栏是可见的,那么 window.innerHeight 是全屏的高度

63121

响应式图像

如果页面延伸超过视口的高度——滚动条出现——视窗的宽度将会大于html元素的宽度。 因此,如果你将一个元素设置为100vw,这个元素将会延伸到html和body元素范围之外。...因为这个细微的差别,当使一个元素横跨整个页面的宽度,最好使用百分比单位而不是视口的宽度。 2....占满高度的元素:vh > % 在另一方面,当使一个元素跨越整个页面高度,vh远比百分比单位好。...滚动条的问题也不是一个问题,因为现在大多数页面通常不会有水平滚动条。 vh应用 全屏背景图片 vh单位一个典型的用途是用来创建一个横跨整个屏幕高度和宽度的背景图片,不管设备的大小。...: 100vh; } 占满全屏的内容块像“多页面”一样 section { width: 100%; height: 100vh; } ?

2.5K10

Android开发笔记(一百三十六)可折叠工具栏布局CollapsingToolbarLayout

3、exitUntilCollapsed : 该标志保证页面上至少能看到最小化的工具栏,不会完全看不到工具栏。具体的滚动说明如下所示: 向上滚动:头部先往上收缩,一直滚到折叠的最小高度。...然后头部固定不动,主体继续向上滚动向下滚动:头部固定不动,主体先向下滚动,一直滚到主体全部拉出。然后头部向下展开。...具体的滚动说明如下所示: 向上滚动:头部先往上收缩,一直滚到折叠的最小高度。然后头部与主体先一起滚动,头部滚到位后,主体继续向上。 向下滚动:头部与主体先一起滚动,一直滚到头部折叠的最小高度。...然后主体向下滚动,滚到位后头部继续向下展开。 同时声明scroll、enterAlways和enterAlwaysCollapsed,滚动效果如下图所示: ?...5、snap : 在用户手指松开,系统自行判断,接下来是全部向上滚到顶,还是全部向下展开。 同时声明scroll和snap,滚动效果如下图所示: ?

3.1K30

对html与body的一些研究与理解

其实,在我看来,不是“失效”,是生效了。当标签无背景样式,的背景色其实不是标签的背景色,而是浏览器的。...空白页面下IE和Firefox火狐浏览器左侧的滚动条与否 Firefox下没有滚动条,有时候会产生体验上的一些问题,比如:假设一个页面高度有限,无滚动条,当鼠标移到一个元素上,要显示一个浮动层,但是这个浮动层有一定的高度...,加上鼠标位置偏低,一旦浮动层出现,说不定页面高度被撑高并出现滚动条,这是在Firefox浏览器下就会产生页面的晃动,原因是滚动条的出现导致页面的宽度减小,布局发生一些偏移,而这种便宜造成的体验是不好的...默认状态下,不是高度100%显示的,不要看定义background属性好像就是满屏显示的,正如上面所推断的,此背景已非之背景。用下面这个一测便知。...>高度100%显示,溢出滚动

2.1K30

CSS中的background属性与margin和padding内外边距的关系总结

最近在写一个系统页面,涉及到background背景和背景图、渐变等属性,经过查阅资料发现background有各种子属性,特此整理一下。 浏览器兼容性支持:     PC端: ?    ...background-attachment: scroll; 背景相对于元素本身固定, 而不是随着它的内容滚动(对元素边框是有效的)。...如果一个元素拥有滚动机制,背景将会随着元素的内容滚动, 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。...,超出部分裁剪 background-size: contain; 缩放背景图片以完全装入背景区,不够的地方空白显示 / 一个值: 这个值指定图片的宽度,图片的高度默认为auto / background-size...透明 / 无背景图片 / 平铺 / 背景图片随文本滚动(不理解的一定要自己动手试一下) / 位于元素左上角 我们写一个复合样式看一下效果: style="background: #ec971f url

6.5K00

创意卡片式项目管理界面UI设计源码

该UI设计中,将各个项目以卡片的方式堆叠排列在屏幕上,当点击了其中的某个项目的时候,该项目图片会全屏放大,向下滚动鼠标可以看到该项目的介绍信息。...项目的图片被设置为.cd-title::before伪元素的背景图片。...接着,第二和第三个项目被使用translateY属性沿Y轴向下移动,分别移动.cd-project-info高度的1/3和2/3。这样就是3个项目分别在同一个屏幕中显示1/3的部分。...); } 对于.cd-project-info(项目信息),它有100%的高度,一个overflow: auto属性(使其可以滚动),它被放置在父元素.single-project的左上角位置。...它的::before伪元素是一个空白占位,它等于屏幕视口的宽度和高度,它的作用是让项目图片开始可以全屏显示,而不是被content-wrapper的内容覆盖。

1.6K20

css基础系列

高度: height: 长度值|百分比|auto 最大高度: max-height: 长度值|百分比|auto 最小高度: min-height:长度值|百分比|auto ?...image.png 文字粗细: font-weight:normal|bold|bolder|lighter|100到900 文字样式: font-style:normal|italic|oblique...: 设置元素的背景图片的显示方式: background-attachment: scroll | fixed scroll: 默认值,背景图片滚动滚动 fixed:当页面的其余部分滚动背景图片不会移动...设置元素的背景颜色 background-image:把图像设置为背景 background-position:设置背景图像的起始位置 background-attachment:背景图像是否固定或者随着页面的其余部分滚动...: scroll | fixed scroll:随着滚动滚动,fixed:背景图片不会移动 背景图片定位 background-position: 百分比 | 值 | top | right | bottom

1.7K40

css应知应会 第二集

h-shadow:阴影的水平偏移距离,取值为正,阴影向右偏移,取值为负,阴影向左偏移 v-shadow:阴影的垂直偏移距离,取值为正,阴影向下偏移...元素向下移动 margin-left 设置数据为正数,元素向右移动 margin-top 设置数据为负数,元素向上移动...属性: background-attachment 取值: 1、scroll 默认值,背景图会随着滚动条而滚动...2、fixed 固定,背景图不会随着滚动条的滚动而改变位置 6、背景图片定位/位置 作用:改变背景图像在元素中的默认位置...1、x y x :背景图像水平偏移距离,取值为正,背景图向右偏移,取值为负,背景图向左偏移 y :背景图像垂直偏移距离,取值为正,背景图向下偏移

1.2K20

CSS基础知识巩固你的前端基础

继承,就是css属性可以从父元素向下传递到子元素。 css的选择器 元素选择器,是最简单的选择器。...background-repeat 定义背景图片是否重复以及其重复方式 background-attachment 定义背景图片是否跟随内容滚动 background-position 定义背景图片的水平位置和垂直位置...background-attachment用于设置背景图像是否固定或者随着页面的其余部分滚动。默认值为: scroll,表示可以随着页面其余部分的滚动滚动。...设置 fixed,表示当页面其余部分滚动背景图片不会滚动,设置 inherit,继承父元素。...min-height 设置元素的最小高度 max-height 设置元素的最大高度 css列表属性表: 属性 说明 list-style-image 设置列表项标记样式为图像,none/inherit

2K10

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

, 0%, 0%) , rgb(0%, 100%, 0%) , rgb(0%, 0%, 100%) 背景颜色示例 : background-color: pink; 2、背景图片 CSS 的背景图片样式语法...网页背景兼容问题 在网站开发 , 经常遇到 网站首页使用超大背景图片显示 的情况 , 如 : 背景图片 使用 1920 x 1080 像素的图片 ; 每个人的电脑分辨率不同 , 有的电脑的分辨率可能没有...background-attachment : scroll | fixed background-attachment 属性值设置 : scroll 或 fixed 二选一 ; scroll : 背景图像 与 网页内容 绑定 , 网页滚动..., 背景图像也进行滚动 ; fixed : 背景图像 固定 , 滚动网页 , 背景图像位置保持不变 ; 7、背景样式简写 使用 CSS 样式设置 盒子 背景 , 需要 设置多个 CSS 样式 ,...设置 背景图片 , 平铺模式 , 定位方式 , 附着方式 等 , 下面是一个完整的图片背景设置的代码 , 代码很繁琐 ; body { /* 设置一个足够高的高度, 让页面滚动起来 */

1.4K10

6-css样式

背景图片小,背景图片会平铺 铺满整个容器 背景图片位置background-position 背景图片定位的值是两个单位,分别代表坐标x,y轴 背景图片定位的值可以是应为left,right,top,...background-attachment background-attachment:fixed 背景图像是否固定或者随着页面的其余部分滚动 background-attachment的值可以是scroll...visibility:hidden visible元素可见 hidden元素不可见 collapse当在表格元素中使用时,此值可删除一行或一列,不会影响表格的布局 溢出隐藏overflow 设置当对象的内容超过其指定高度及宽度如何显示内容...auto如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。...{ width: 200px; height: 200px; border: 2px red solid; position: absolute; left: 100px

1.9K20
领券