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

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

一、需求：

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

在这里插入图片描述

二、解决方式：

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

具体代码：
<div class="item_right">
	<img src
了解本专栏 订阅专栏 解锁全文 超级会员免费看
小跳不会Coding
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
【解决】Android 2.x 不支持overflow、position:fixed解决方案
kaosini的专栏
07-02 2547
Android 2.x和IOS5以下都不支持overflow:auto属性（position:fixed也不支持）。 移动端浏览器兼容性和PC端相比，有过之而无不及。操作系统版本及各式浏览器和各式的屏幕大小排列组合，你永远也无法预测到你的应用会在哪部手机上冒出什么样的问题。 测试过各种浏览器（chrome手机浏览器、百度手机浏览器、手机QQ浏览器、UC浏览器、UC浏览器HD、safari浏
h5-----------固定定位
学习是我快乐， 吗
07-13 1759
&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：背景图像固定（也叫背景附着）
最新发布
听海边涛声
06-14 405
CSS：背景图像固定（也叫背景附着）
css 解决ios设备固定背景图的显示问题。background-attachment: fixed在iphone设备上失效；
PrimaryColor
12-01 2466
设置背景图固定，滚动内容时背景图不滚动。在android上是没有问题的，但是ios上就是会被内容挤出去，滚动的时候背景图变形。通过background-attachment: fixed;和定位的方法实现或还是会出现图片变形，或者盒子被撑大。最终采用动态添加::before伪元素样式实现图片的固定布局。背景图如果直接写死是没有问题的，动态绑定添加的就有问题。
CSS基础——定位及背景处理
ybb_ymm的专栏
04-20 2044
解决这个问题，我们就可以使用我们这个负值的情况了。1、将我们多个图片整合到一张图片里面，浏览器只需要进行一个请求，就可以同时加载我们需要的多张图片，提高了访问的效率，提高用户的体验度。4、可以同时为一个元素指定背景颜色和北京图片，背景颜色将作为背景图片的底色来战士，一般设置背景图片的同时都会设置一个背景颜色。因为，加载的时候是需要一定的时间的，所以在加载和显示的时候会穿线一段时间背景图片无法显示，这就会导致白屏或者闪烁的问题！注意：不随窗口滚动的图片，我们一般都是设置给body，而不是设置给其他的元素的。
ios苹果手机position：fixed的兼容性以及无法定位到全局的问题
weixin_53296753的博客
11-29 4498
首先大家知道position：fixed；这个css属性在任何环境下都有可能会被阻断，也就是无法作用于全局。所以要想我们在项目中的遮罩蒙版等作用于整个屏幕，要将其所有的父级元素css中的overflow置为visible，但是这又是不现实的。也就是说，当父级元素中有含上面几个css属性的时候，你写的模态框，透明背景等等，就不能覆盖整个屏幕了。可以试试在父级加入下面的css：那么fixed的范围就是加入这个属性的元素。ios5以上的手机确实兼容了position:fixed，简单粗暴的，用js控制下。
解决h5移动端布局有垂直滚动条，底部fixed定位元素在IOS下定位失效，跟随滚动条滚动的问题
lifachang的博客
09-23 3451
h5移动端经常会有固定在底部的按钮 这种布局惯用的就是给底部元素fixed定位，然而在IOS下，如果内容很长有滚动条，滚动的时候fixed定位的元素会跟随滚动，特别是当蓝色内容部分有input元素的时候更容易出现跟随滚动的现象，安卓下无此现象。 解决办法： 禁止html滚动，给蓝色框添加滚动条，这样内容就在蓝色框里滚动，红色框absolute定位在底部即可。记得给蓝色框一个padding-bottom高度大于等于红色框高度即可，这样给红色框留出位置，不然最下面的内容会被红色框遮挡。 上代码： <!D
h5实现输入框fixed定位在屏幕最底部兼容性
胡西风的博客
08-27 1135
已经有人碰到过了 h5实现输入框fixed定位在屏幕最底部兼容性 移动端iOS第三方输入法遮挡底部input及android键盘回落后留白问题 手机浏览器浏览WebApp弹出的键盘遮盖住文本框的解决办法...
详解移动端HTML5页面端去掉input输入框的白色背景和边框（兼容Android和ios）
12-14
本篇文章将详细讲解如何去除`input`输入框在Android和iOS设备上的默认白色背景和边框，从而实现更加美观、协调的界面效果。 首先，问题的起因在于开发者在创建一个订单查询功能时，使用了`<input type="date">`标签...
html5实现输入框fixed定位在屏幕最底部兼容性
11-19
在桌面端，我们可以轻松地利用CSS的`fixed`定位实现，但在移动设备上，尤其是涉及到键盘弹出和不同浏览器的行为时，问题就变得复杂了。 1. **初步解决**： 初步的布局解决方案通常包括三个部分：头部（header）、...
H270_HTML手机电脑网站_网页源码移动端前端js效果_H5模板_自适应css源码ui组件.zip
08-03
这包括对主流浏览器（如Chrome、Firefox、Safari、Edge等）的支持，以及对iOS、Android等移动系统的适配。 综上所述，"H270_HTML手机电脑网站_网页源码移动端前端js效果_H5模板_自适应css源码ui组件.zip"是一个全面...
安卓端H5页面的emoji表情显示处理
10-12
在安卓端开发H5页面时，常常会遇到用户在输入框中使用手机自带的emoji表情符号。这些表情字符在不同的设备、浏览器上可能显示不一致，甚至无法正确显示，因此需要进行特殊处理。本文将详细讲解如何处理Android平台上...
289_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-04
总结来说，这个压缩包提供的资源是关于使用HTML5、CSS3和JavaScript进行响应式网站开发的实例，特别适合初学者学习或快速搭建移动端与电脑端兼容的网站。通过研究这些源码，开发者可以了解和掌握现代网页开发的关键...
IOS下软键盘弹出时，H5页面上方的固定区域被顶上去的解决办法(js)
soband_xiang的专栏
03-26 4560
键盘弹出后，整个页面上移，原先固定在顶部，position=fixed的div，不见了。原来这时候div的fixed的效果变成了absolute效果。键盘弹出时，会触发body的scroll事件。这时候只要得到页面整体滚动的距离，把div的top设置为这个距离就可以了 $(window).on('scroll', function () { //在IOS下document.body.scrollT...
CSS背景属性
weixin_70374250的博客
10-12 1083
background-origin 属性规定 background-position 属性相对于什么位置来定位。注意：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有。background-image 属性设置元素的背景图⽚，元素的背景占据了元素的全部尺⼨，包括内边距和边框，但不包括外边距。background-position 属性设置背景图像的起始位置。这个属性设置背景原图像的位置，背景图像如果要重复，将从这⼀点开始。
background-attachment: fixed 在iphone设备失效
热门推荐
Aifangmy的博客
08-06 3万+
背景 页面中使用了 background-attachment:fixed; 来控制背景图不随内容的滚动而滚动，使其固定大小。 在PC端可以起作用和一些安卓的机器上能够起作用，但是在iphone上没有效果。 原因 固定背景导致重绘的成本很高，并且滚动表现也不尽人意，所以在一些移动端是被禁止的。 解决方案 &::after { content: ''; position: fixed; z-index: -1; top: 0;
CSS学习09：背景图片固定
玉安_ZhangDe的博客
03-23 1007
使用方法： background-attachment: scroll | fixed 参数 作用 scroll 背景图像是随对象内容滚动 fixed 背景图像固定 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt
HTML5 08_定位
iamts的博客
07-12 301
HTML5学习的第8个部分：定位
web前端入门到实战：CSS页面底部固定的6种方法
软件开发-前端开发-IT
08-17 2050
当我们在写页面时经常会遇到页面内容少的时候，footer会戳在页面中间或什么？反正就是不在最底部显示，反正就是很难看，下面要讲的布局就是解决如何使元素粘住浏览器底部， 方法一：footer高度固定+绝对定位 html <div class="dui-container"> <header>Header</header> <main>Content&...
uni-app的H5端的页面背景图片一般怎么实现
05-26
在uni-app的H5端，实现页面背景图片有以下几种方式： 1. 使用CSS样式设置背景图片，可以在页面的style标签中添加如下代码： ``` background-image: url('图片地址'); background-size: cover; ``` 其中，`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值