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

如何将固定的背景图片*总是*定位在手机浏览器的底部?(CSS)

要将固定的背景图片总是定位在手机浏览器的底部,可以使用CSS的background-attachment属性和background-position属性来实现。

首先,设置背景图片的位置为底部,并且将背景图片固定在视口中。可以使用以下CSS代码:

代码语言:txt
复制
body {
  background-image: url(背景图片链接);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: bottom;
}

其中,背景图片链接是你要使用的背景图片的URL。

这样设置后,背景图片将会固定在浏览器的底部,并且不会随着页面的滚动而移动。

推荐的腾讯云相关产品:腾讯云移动浏览器网页开发工具MBS(Mobile Browser Service),它提供了丰富的移动浏览器开发能力和工具,可以帮助开发者更好地适配和优化移动端网页。了解更多信息,请访问腾讯云MBS产品介绍页面:腾讯云MBS

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

相关·内容

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

看过很多博客、微博和QQ空间里面,很多人都给自己小窝设置了固定背景,不随浏览器滚动,实现方法除了Javascript,CSS也可以轻松实现。 ?...background不随浏览器滚动代码如下: CSS代码 body {background:url(背景图片地址) no-repeat fixed center top;margin:0;padding...:0;} 只需要一个核心代码就实现了背景不随浏览器滚动,兼容了IE6+浏览器, 其核心代码为:background-attachment: fixed; 无论滚动条如何拖动,背景图片始终牢牢固定在页面上...目前绝大部分人都在用宽屏浏览器,所以我们设置背景最好选择1920*1080大小较为合适,无论是微博还是QQ空间,用户关注是中间文章,选择背景要挑选主题画面偏向两边,使其让人显而易见,才能起到画龙点睛作用...如果你用其他方法不能解决IE6背景不随浏览器滚动,不妨试试上面的CSS代码,或者用下面的JS来解决。

1.4K10

【移动端网页布局】流式布局案例 ④ ( Banner 栏制作 | 固定定位 | 标准流 | 百分比宽度设置 )

, 搜索栏还需要保持 不管如何进行滚动 , 始终悬浮在最上方 ; 搜索栏 必须是同 固定定位 , 才能实现上述效果 ; 搜索栏 父容器 样式如下 : /* 下面是搜索栏样式 */ .search-wrap...320 像素 浏览器拉倒最小 该布局宽度不低于 320 像素 */ min-width: 320px; /* 搜索栏最大宽度 640 像素 浏览器拉到最大 该布局最大 640 像素...color: #666; /* 取消链接底部横线样式 */ text-decoration: none; } .clearfix:after { /* 清除浮动固定样式...width: 100%; /* 搜索栏高度为 44 像素 */ height: 44px; /* 搜索栏最小宽度 320 像素 浏览器拉倒最小 该布局宽度不低于 320.../images/jd.png) no-repeat; /* 设置背景图片尺寸 会缩放背景图片 */ background-size: 20px 15px; } .jd-icon::after

1.7K20
  • css布局优化:布局计算限制— containwill-change合成层

    浏览器层面优化前端性能(2):Reader引擎线程与模块分析优化点》提过:避免大规模、复杂布局布局,就是浏览器计算DOM元素几何信息过程:元素大小和在页面中位置。...每个元素都有一个显式或隐式大小信息,决定于其CSS属性设置、或是元素本身内容大小、抑或是其父元素大小。Blink/WebKit内核浏览器和IE中,这个过程称为布局。...基于Gecko浏览器(比如Firefox)中,这个过程称为Reflow。...比如,你页面顶部有一个固定位header,而此时屏幕底部有某个区域正在发生绘制的话,整个屏幕都将会被绘制。 注意:DPI较高屏幕上,固定定位元素会自动地被提升到一个它自有的渲染层中。...布局时,现代主流浏览器都会做一些智能判断,最终决定哪些需要改变,哪些不需要改变。不过,页面布局是很复杂浏览器不一定能判断到所有的情况。

    1.4K30

    【移动端网页布局】流式布局案例 ③ ( 实现搜索栏功能 | 伪元素选择器 | 子绝父相 | 外边距塌陷处理 | 二倍精灵图处理方案 )

    , 为其 设置左右两侧 margin 外边距值 ; css 样式实例 : .search-wrap { /* 第二排搜索栏样式 */ /* 该样式滑动时 , 始终最上方显示 */...: 320px; /* 搜索栏最大宽度 640 像素 浏览器拉到最大 该布局最大 640 像素 */ max-width: 640px; } 3、搜索栏父容器设置 调试模式下 , 该父容器尺寸为.../images/jd.png) no-repeat; /* 设置背景图片尺寸 会缩放背景图片 */ background-size: 20px 15px; } 这一道小竖线 , 使用一个...} .clearfix:after { /* 清除浮动固定样式 如果要为某个容器清除浮动 为其设置 class="clearfix" 样式 */ content..., 在手机模式中打开开发页面 ;

    2K30

    CSS征途之Background点滴

    这样,文本依然出现在文档标记中以供搜索引擎检索和屏幕浏览器识别,但是浏览器中就会显示首选字体。...1、多个背景图片 css3里面,你可以再一个标签元素里应用多个背景图片。代码类似与css2.0版本写法,但引用图片之间需用“,”逗号隔开。...6、背景颜色调整 background-color属性css3版本里面稍微做了增强,除了指定background color背景颜色之外,还可以对不使用标签元素背景图片进行去色处理。...这个背景长宽值css2.1之前是不能被修改。 所以实际结果是只能重复显示,所以出现了repeat,repeat-x,repeat-y,no-repeat这些属性。就是用来控制背景图片显示。...其两者都可以为正,可以为负,也可以使用固定几个英文单词(left、right、center、top、bottom)进行定位背景图片。)属性,设置合适值就能“获取”对应区域。

    1.5K40

    CSS基础学习(3)

    CSS-定位(一) 1-1 Position-statiic CSS关键属性—position 修饰全局DOM元素布局 static遵循默认文档流布局,top,left,right,bottom...,属性都无效 Position除了static属性外,,还有 relative (相对定位) absoulute (绝对定位) fixed (固定定位) sticky (粘性定位) 1-2 Position-relative...(相对定位) 使用relative(相对定位) 来实现 relative默认文档流布局下,进行偏移 .first { position: relative; left: 50px;...,后界面变暗 模态框特点: 1.模态框总是浏览器中心,浏览器随意放大缩小,模态框还是浏览器中心 2.模态框总有一个半透明背景 第一步:完成半透明背景 半透明背景覆盖整个页面 <div class=.../Using_CSS_gradients 3-2 背景图片 给元素设置背景图片,及背景图片一些特性 /*添加图片*/ background-img: url(图片地址); /*设置背景图片重复*/

    65930

    6-css样式

    背景图片小,背景图片会平铺 铺满整个容器 背景图片位置background-position 背景图片定位值是两个单位,分别代表坐标x,y轴 背景图片定位值可以是应为left,right,top,...bottom,center 背景图片重复background-repeat no-repeat数组图像不重复,常用 round自动缩放直到适应并填充整个容器 space以相同间距平铺且填充整个容器 背景图片定位...super垂直对齐文本上标,和sup标签一样效果 top对象顶端与所在容器顶端对齐 text-top对象顶端与所在行文字顶端对齐 middle元素对象基于基线垂直对齐 bottom对象底端与所在行文字底部对齐...auto如果内容被修剪,则浏览器会显示滚动条以便查看其余内容。...间距margin 内填充padding 浮动float 浮动原理:浮动使元素脱离文档普通流,漂浮在普通流之上 浮动元素依然按照其普通流位置上出现,然后尽可能根据设置浮动方向向左或向右浮动,

    1.9K20

    CSS入门?一篇就够了!

    尽量使用系统默认字体,保证在任何用户浏览器中都能正确显示。 CSS Unicode字体 CSS 中设置字体名称,直接写中文是可以。...父级没有定位 若所有父元素都没有定位,以浏览器为准对齐(document文档)。 父级有定位 绝对定位是将元素依据最近已经定位(绝对、固定或相对定位父元素(祖先)进行定位。...固定定位fixed(认死理型) 固定定位是绝对定位一种特殊形式,类似于 正方形是一个特殊 矩形。它以浏览器窗口作为参照物来定义网页元素。...当position属性取值为fixed时,即可将元素定位模式设置为固定定位。 当对元素设置固定定位后,它将脱离标准文档流控制,始终依据浏览器窗口来定义自己显示位置。...不管浏览器滚动条如何滚动也不管浏览器窗口大小如何变化,该元素都会始终显示浏览器窗口固定位置。 固定定位有两点: 固定定位元素跟父亲没有任何关系,只认浏览器

    5.2K20

    css笔记

    固定定位fixed(认死理型) 固定定位是绝对定位一种特殊形式,类似于 正方形是一个特殊 矩形。它以浏览器窗口作为参照物来定义网页元素。...当position属性取值为fixed时,即可将元素定位模式设置为固定定位。 当对元素设置固定定位后,它将脱离标准文档流控制,始终依据浏览器窗口来定义自己显示位置。...不管浏览器滚动条如何滚动也不管浏览器窗口大小如何变化,该元素都会始终显示浏览器窗口固定位置。 固定定位有两点: 固定定位元素跟父亲没有任何关系,只认浏览器。...固定定位完全脱标,不占有位置,不随着滚动条滚动。 记忆法: 就类似于孙猴子, 无父无母,好不容易找到一个可靠师傅(浏览器),就听师傅,别的都不听。 ie6等低版本浏览器不支持固定定位。...标题标签h 尽量少用h1,可以多用h2和h3等标签 页面底部所用知识点 名称 说明 绝对定位盒子居中对齐 盒子 left 50% 然后通过 margin 负值自己宽度一半(固定定位也是如此) 固定定位盒子靠近版心右侧对齐

    7.7K50

    CSS | 视差滚动 | 笔记

    background-attachment: 决定 背景图像位置 是 视口内固定 ,或者 随着包含它区块滚动 。 它属性值含义如下: 属性值 含义 fixed 背景相对于视口固定。...// 背景图片 相对于 viewport 固定 background-attachment: fixed; // 背景图片尺寸: 铺满 background-size: cover;...vh 是 css一个相对长度单位, 是相对于视窗高度, 100vh 就是指 元素高度等于当前浏览器视窗高度, 即浏览器内部可视区域高度大小。...结果是,当地址栏可见时,屏幕底部部分将被切断,从而破坏了100vh初衷。 如下所示: 当地址栏可见时,由于移动浏览器不正确地将100vh设置为屏幕高度而没有显示地址栏, 因此屏幕底部被切断。...在上图中,应该在屏幕底部按钮被隐藏了。 更糟糕是,当用户第一次使用手机访问网站时,地址栏会显示页面顶部, 因此用户体验是很糟糕

    73021

    大型编程电视剧连载 | CSS知识点硬核整理归纳(二)

    定位:将盒子定在浏览器某一个位置——CSS 离不开定位,特别是后面的 js 特效。 6.2、什么是浮动(float) 元素浮动是指设置了浮动属性元素会脱离标准普通流控制移动到指定位置。...7.2、边偏移 简单说, 我们定位盒子,是通过边偏移来移动位置 CSS 中,通过 top、bottom、left 和 right 属性定义元素边偏移:(方位名词)。...7.3、定位模式 CSS 中,通过 position 属性定义元素定位模式,语法如下: 选择器 { position: 属性值; } 定位模式是有不同分类不同情况下,我们用到不同定位模式。...7.3.4、固定定位(fixed) 固定定位是绝对定位一种特殊形式: (认死理型) 如果说绝对定位是一个矩形 那么 固定定位就类似于正方形 完全脱标 —— 完全不占位置; 只认浏览器可视窗口 ——...不能 基本单独使用 绝对定位absolute 完全脱标,不占有位置 相对于定位父级移动位置 能 要和定位父级元素搭配使用 固定定位fixed 完全脱标,不占有位置 相对于浏览器移动位置 能 单独使用,

    1.8K20

    CSS第五天-定位

    CSS第五天-定位 静态定位:static 定位默认值,写边偏移也不会有效果 ---- 相对定位:relative 父元素搭配子绝父相使用 根据自身原来位置,进行定位 没有脱标,页面还占有位置...天生就是给绝对定位当爹用 ---- 绝对定位:absolute 根据最近带有定位(非静态)祖先元素来定位 子绝父相 脱离标准流,页面不占有位置 绝对定位固定定位,浮动,可以直接设置宽度和高度,默认宽度是内容宽度...---- 固定定位:fixed 永远根据浏览器可视区域定位,不会随着滚动条滚动而滚动 可以直接加宽高,默认宽度是内容宽度 脱离标准流,页面不占有位置 解决分辨率问题有两种方法… ---- 定位层级...:z-index 只有定位有这属性,绝对定位固定定位、相对定位 默认值:auto,数字越大,层级越高 可以设置正值或负值,没单位 ---- 过渡: transition 让元素样式慢慢变化,常配合hover...,分别取负值设置盒子background-position:x y 合并成一张大图片,这张大图片称之为精灵图 减轻服务器压力,提高页面加载速度 ---- 背景图片大小:background-size

    2.7K40

    CSS样式更改篇——背景Background

    前言 上篇文章主要讲述了CSS基础用法,讲述了如何定义头文件,导入CSS文件,id和class选择器,元素选择器,后代选择器,子元素选择器,兄弟选择器,伪类选择器等等,让大家对CSS选择器有个简单认识和了解...背景可以设置很多,比如背景颜色,背景图片,背景定位,背景重复,背景关联, 1).背景颜色 2).背景图片 <div style...中间 top 顶部 bottom 底部 right 右边 left 左边 还可以使用百分比来设置定位: <div style='background-position:...不出现滚动条 scroll 出现滚动条 no 没有滚动条 6).背景大小 7).<em>背景图片</em><em>的</em><em>定位</em>区域...篇) 总结 这篇文章主要介绍了<em>CSS</em>样式更改篇中<em>的</em>背景Background<em>的</em>基本设置,希望让大家对<em>CSS</em>选择器有个简单<em>的</em>认识和了解。

    1.5K30

    【网页前端】CSS进阶之元素背景以及清除浏览器默认样式

    本期介绍 本期主要介绍CSS进阶之元素背景以及清除浏览器默认样式 文章目录 1. 简述 2. 背景颜色 2.1 概述及格式 2.2 透明度设置-rgba 3. ...简述 在网页中,到处能够看到各种背景(背景颜色、背景图片 等),页面中,元素是可以通过设置 背景展示 更加丰富效果,这是构成我们网页多样化重要部分。...3.3 背景图片位置 简述及格式 背景图片中,一般我们会为某张背景图片设置特有位置,防止 出现下图 背景图片重叠。...我们可以设置背景附着,这样即使浏览器上下滚动,背景也是固定,让用户感受到层次感。...这里为各位提供一套清空浏览器默认样式 CSS 代码, 各位只需要将其保存成 CSS 文件,每次 HTML 引入该文件,即可完成浏览器默认样式清空。

    1.1K40

    CSS进阶08-绝对定位 Absolute Positioning

    (注2:更多内容请查看我目录。) 1. 简介 绝对定位模型中,盒根据其包含块显式偏移。盒从标准流中完全脱离(对后来同胞元素没有影响)。...绝对定位盒为其标准流子元素和绝对定位(非固定定位)后代创建新包含块。...固定定位 Fixed positioning 固定定位是绝对定位子类。唯一区别在于,固定定位包含块是由视口创建连续媒体中,当文档滚动时,固定盒不会移动。...就这点来讲,它们同固定背景图片fixed background images相像。分页媒体paged media中,固定定位每一页重复。这对布局很有用,比如,每个页面的底部放置签名。...比页面区域要大固定定位盒将会被裁剪。固定定位初始化包含块中不可见部分将不会打印。 开发者可以使用固定定位去创建框架式frame-like布局。考虑如下框架布局: ?

    52210

    哪些你知道或不知道css,在这里或许都齐全

    半透明边框 实现半透明边框可以有很多实现方法,比如:伪元素和定位相结合,多层div包裹和定位相结合......灵活背景定位 有时候我们希望图片和容器边角之间能留出一定空隙,类似padding效果,对于固定尺寸大小容器来说我们可以利用 background-position 实现,但是内容往往是不固定...效果图如上所示: 解决方案:css渐变和背景扩展,背景图之上加一层纯色实色背景,给两层背景指定不同background-clip; 渐变是可以和背景图片一起使用,而且背景图片预发和平时写法是一样...垂直居中 css中对元素进行水平居中垂直居中,我们页面布局时候会经常用到。...紧贴底部页脚 一个具有块级样式页脚,当页面内容足够长时他一切正常,但是当页面比较短时,就会出现问题;页脚就不能像我们期望中那样紧贴在视口底部,而是在内容下方 解决方案:flex弹性布局 flex

    1.4K20

    哪些你知道或不知道css,在这里或许都齐全 css编码技巧 css小技巧

    使用css变量,currentColor,inherit...目前css变量很少,兼容性有待改善 响应式网页设计,每个媒体查询都会增加成本;避免媒体查询 使用百分比长度来取代固定长度,或者使用与视口相关单位...灵活背景定位 有时候我们希望图片和容器边角之间能留出一定空隙,类似padding效果,对于固定尺寸大小容器来说我们可以利用 background-position 实现,但是内容往往是不固定?...效果图如上所示: 解决方案:css渐变和背景扩展,背景图之上加一层纯色实色背景,给两层背景指定不同background-clip; 渐变是可以和背景图片一起使用,而且背景图片预发和平时写法是一样...垂直居中 css中对元素进行水平居中垂直居中,我们页面布局时候会经常用到。...紧贴底部页脚 一个具有块级样式页脚,当页面内容足够长时他一切正常,但是当页面比较短时,就会出现问题;页脚就不能像我们期望中那样紧贴在视口底部,而是在内容下方 ?

    1.7K10
    领券