h5开发网站-css实现页面的背景固定定位；以及安卓ios手机端兼容问题

已于 2023-09-28 09:51:05 修改
阅读量1.3k 收藏 1
点赞数
分类专栏： 网站开发 文章标签： css 前端
于 2023-09-05 09:30:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_48596030/article/details/132684442
版权

一、需求：

h5网站在页面滚动时，背景图片保持不变，而不是跟随滚动。

在这里插入图片描述

二、解决方式：

使用背景固定定位，只需要在CSS中增加一个background-attachment: fixed;属性即可。

具体代码：
<div class="item_right"
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Vue2 - 移动端H5网页点击输入框弹出软键盘后，收起后页面无法复原的问题，页面没能恢复原状+遮盖遮挡+布局出现上移或下移整体未复原到打开软键盘之前（解决弹出键盘导致页面布局错乱，安卓+苹果ios）
王二红
04-07 5046
vue，移动端网页，输入框弹起软键盘，布局没有上移，弹出软键盘的时候页面顶起不恢复，实现移动端自动弹起软键盘，软键盘挡住输入框的解决方案，移动端技术问题 — H5页面底部弹出页input输入时整个弹出页被输入法顶起的解决方法，vue h5页面软键盘遮挡等，软键盘顶起页面，H5，input输入时，软键盘弹起不能自动收回，移动端软键盘监听弹出收起及影响定位布局，H5-input弹起键盘遮盖输入框，收起后导致页面无法复原的问题，输入框弹起软键盘，收起后导致页面无法复原的问题，移动端的软键盘对页面css布局影响的解
完美解决IE6浏览器下不兼容position:fixed固定定位
somous_ly的专栏
10-16 980
一般的 position:fixed; 实现方法 以我的博客为例，在右下角 ... 这个 HTML 元素使用的 CSS 代码如下：#top{ position:fixed; bottom:0; right:20px; }实现让 ... 元素固定在浏览器的底部和距离右边的20个像素。 在 IE6 中实现 position:fixed; 的办法 刚刚提过，在IE6中是不能直接
h5-----------固定定位
学习是我快乐， 吗
07-13 1824
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; .box1{ width: 200px; height: 2
CSS背景固定
WangZhang_521的博客
12-27 395
背景固定 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
CSS：背景图像固定（也叫背景附着）
听海边涛声
06-14 1190
CSS：背景图像固定（也叫背景附着）
css背景固定
工作积累
10-06 1060
背景关联 如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。 您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影
详解移动端HTML5页面端去掉input输入框的白色背景和边框（兼容Android和ios）
12-14
本篇文章将详细讲解如何去除`input`输入框在Android和iOS设备上的默认白色背景和边框，从而实现更加美观、协调的界面效果。 首先，问题的起因在于开发者在创建一个订单查询功能时，使用了`<input type="date">`标签...
网页背景H5视频自动播放---PC端、移动端兼容问题完美解决方案（IOS、安卓、微信端）
weixin_44626952的博客
10-24 3620
最近公司官网需要使用视频当做banner背景且自动播放，并且因为是官网需要做到PC端和移动端都可以适配兼容，这些问题很是头疼； 　　兵来将挡，水来土掩，进过查阅相关技术资料，现已完美兼容PC端和移动端。下面就为大家详细讲解： PC端： 　　PC端相应简单些，浏览器对<video>标签的兼容还是很好的，但是想要在浏览器中当做Banner视频自动播放就必须设置这些属性来更好地实现； ...
iOS和android h5字体差异,关于移动hybrid开发中H5页面的字体应与系统保持一致的问题...
weixin_27310985的博客
05-26 1525
8种机械键盘轴体对比本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？0、问题来源在移动hybrid开发，也就是说，部分页面会使用html+css+javascript技术来制作，例如个人中心，收藏页面等。一般来说，移动端都会将字体设置为system系统默认类型。起初，愚钝的我认为，只要在css里不设置任何字体，将会默认使用系统默认字体。然而结果并未如我所想，页面出来后，中文、英文和数字几...
CSS固定背景
Biscuit0769
06-10 377
    关键字fixed用来将背景图片相对于浏览器窗口放置背景图片    background:black url(shell-bg.jpg) no-repeat fixed -237px 30px;  
css使其背景固定
darkZXB的博客
10-16 556
body {                      background-image: url(images/huarun3.jpg);                      background-repeat: no-repeat;                      font-family: "宋体";                      font-size: 12
css 解决ios设备固定背景图的显示问题。background-attachment: fixed在iphone设备上失效；
PrimaryColor
12-01 2847
设置背景图固定，滚动内容时背景图不滚动。在android上是没有问题的，但是ios上就是会被内容挤出去，滚动的时候背景图变形。通过background-attachment: fixed;和定位的方法实现或还是会出现图片变形，或者盒子被撑大。最终采用动态添加::before伪元素样式实现图片的固定布局。背景图如果直接写死是没有问题的，动态绑定添加的就有问题。
h5 定位
html标签-meta
05-27 2408
let me = this if(window.navigator.geolocation){ // navigator.geolocation.getCurrentPosition(onSuccess , onError); alert('支持') }else{ alert("您的浏览器不支持使用HTML 5来...
CSS——背景图片固定（不随页面大小改变而改变）
最新发布
m0_69702096的博客
08-28 2294
使用 background-size 和 background-attachment：可以设置 background-size 为 auto，这样背景图片将按照它的原始尺寸显示，不会随容器大小的变化而缩放。此外，使用 background-attachment: fixed;可以将背景图片固定在视口中，而不是相对于元素。
CSS-45：背景固定
臧小川的博客
10-14 359
超大背景图片 body {
h5的相对定位、绝对定位、固定定位以及案例练习
热门推荐
xuemoKingDeath的博客
04-24 1万+
html> html lang="en"> head> meta charset="UTF-8"> style> #right,#left,#center{ float: left; } #left{ width: 200px; height: 200px;
css固定页面
weixin_30915951的博客
05-26 142
在编写css中，浏览器窗口缩小，页面的div就会变形 用body{min-width：1360 px} 设置一个最小宽度，当页面小于1360 px，HTML就会以1360 px作为页面的宽度； 或者用white-space:nowrap也可； 转载于:https://www.cnblogs.com/liu-heng/p/6907044.html...
css 兼容ie6,ie7,ff的fixed,元素上下端固定定位方法
ldl_xz的专栏
03-26 845
css 兼容ie6,ie7,ff的fixed,元素上下端固定定位方法
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值