css3固定背景background-attachment移动端兼容方案

最新推荐文章于 2022-10-11 10:05:40 发布
最新推荐文章于 2022-10-11 10:05:40 发布
阅读量1.2k 收藏
点赞数
分类专栏： HTML和CSS 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16371909/article/details/111227228
版权
问题背景

想做一个固定背景的移动端网站，结果发现「background-attachment」竟然不起作用，具体出现在iOS Safari浏览器上。

出现原因

查询stackoverflow得知出现问题的原因是background-attachment属性在移动端重绘的成本很高，并且滚动表现也不尽人意，所以在一些移动端是被禁止的。

解决方案

目前有一个成本较低的hack方案，但是效果对于追求完美者可能稍有缺憾。具体的代码是：

body::before {
   
 content: '';
 position: fixed;
 z-index: -
最低0.47元/天 解锁文章
夏尔の
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
css 背景固定样式background-attachment属性基础
09-24
主要为大家介绍了在CSS中，使用背景附件属性background-attachment可以设置背景图像是随对象滚动还是固定不动,需要的朋友可以参考下
css background-attachment属性进阶
09-24
CSS中的`background-attachment`属性是用来控制背景图像随滚动条移动的方式。在深入理解这个属性之前，我们需要确保已经设置了`background-image`属性，因为它定义了背景图像。`background-attachment`接着决定背景...
微信小程序中background-attachment:fixed兼容问题
t800的博客
06-28 981
在微信小程序的页面中使用了background-attachment:fixed;属性，在安卓机型中适用，但在苹果机型中失效了，导致背景图样式没有固定。固定背景导致重绘的成本很高，在苹果手机上该属性可能被禁止。在wxml的盒子定义个class,引入图片我用的是行内样式，使用js中的变量（主要解决动态背景图的需求） js wxss 结语 此方法主要解决在微信小程序中固定背景图片且背景图为动态获取的需求。如果有更好的方法欢迎在评论区讨论^_^...
ios系统和某些移动端background-attachment:fixed不兼容性
weixin_30377461的博客
08-01 142
固定背景不动：background-attachment:fixed; ios系统和某些移动端background-attachment:fixed不兼容性，没有任何效果，但可以hack一下就可以了，代码如下: ps：想在哪个标签加背景，可以在它class后:before. body:before { content: ' '; position: fixed; z-index: -1...
background-attachment:fixed不兼容性
weixin_30618985的博客
02-12 648
ios系统和某些移动端background-attachment:fixed不兼容性，没有任何效果，但可以hack一下就可以了，代码如下: ps：想在哪个标签加背景，可以在它class后:before. body:before { content: ' '; position: fixed; z-index: -1; top: 0; right: 0; ...
CSS3之背景尺寸Background-size使用介绍
09-25
CSS3背景尺寸Background-size，这个属性是改变背景尺寸的通过各种不同是属性值改变背景尺寸呈现的大小，下面为大家详细介绍下其语法、浏览器兼容及使用示例，感兴趣的朋友不要错过
CSS背景background、background-position使用详解
01-19
这篇文章将会涉及css背景(background)的基本用法，包括诸如 background-attachment 等的属性，也会介绍一些有关背景(background)的常用技巧，以及 css3 中的 背景(background)(包含4个新的背景(background)属性)。...
ios移动端部分手机不支持background-attachment: fixed 的解决办法
weixin_30437481的博客
02-07 575
之前在做的微信端相关页面开发的时候，在一些必要的需求场景下，ios系统和某些移动端background-attachment:fixed不兼容性，并不能够达到背景图不随滚动条而滚动的效果，随后在网上查找了相关的解决方案，经过实际测试，下面的hack是管用的，也就是在设置背景图的元素上面，加一个伪元素的样式表，如下： (背景图所在的元素):before { content: ' '; ...
background-attachment 属性，玩心大起
看风听雨
06-25 2978
今天突然有个搞电商的朋友，问我能不能实现一个背景不动，页面滚动的小特效，当时大脑一顿操作，各种实现方法想了好多，第一个想到的就是js控制，突然想到了css的background-attachment 属性，就想试试。background-attachment的属性：（注意：一定要与背景搭配使用）background-attachment的兼容性：background-attachment的兼容性还...
background-attachment
songxueyan214的专栏
05-12 864
background-attachment -- 定义背景图片随滚动轴的移动方式 取值: scroll | fixed | inherit scroll: 随着页面的滚动轴背景图片将移动 fixed: 随着页面的滚动轴背景图片不会移动 inherit: 继承 引用网址:http://www.dreamdu.com/css/property_background-attachment/ 初始值: scroll 继承性: 否 适用于: 所有元素 background:背景.attachment:附着.
background-attachment: fixed的用法
梁同学与Android
11-12 5681
CSS background-attachment 属性 标签定义及使用说明 background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。 默认值: scroll 继承: no 版本: CSS1 JavaScript 语法: object object.style.backgroundAttachment=“fixed” 属性值 scroll 背景图片随着页面的滚动而...
关于background-attachment: fixed 实现滚动视差的逻辑理解
lin_jiejie的博客
04-18 1208
使用 background-attachment: fixed 实现滚动视差 <section style="height: 300px;width:500px;background: url('http://pic7.photophoto.cn/20080407/0034034859692813_b.jpg') fixed no-repeat;">IMG1</section...
css background-attachment:fixed 固定背景、不随内容一起滚动
愿我如星君如月 ... 夜夜流光相皎洁 ...
01-17 2888
兼容性：全兼容，只不过IE滚动时会有一点不流畅。 background-attachment 有 3 个选项：scroll / fixed / inherit 。 锁定背景： background-attachment:fixed; 要有比较好的体验，建议让background-image:url(""),background-color:""一起使用。这样无图片时也能有很好的体验。...
使用background-attachment：fixed固定背景图以及ios系统不兼容网页背景图片固定的解决方案
春风十里柔情的博客
10-15 2298
解决办法： body{ width: 100%; background-image:url('url); background-repeat: no-repeat; background-position: center; background-attachment: fixed; z-index: -1; } 兼容性： body:before { content: ’ '; position: ...
手机端背景图固定fixed兼容方法
夕空
06-03 933
背景图background-attachment:fixed在移动端多为不支持，采用position: fixed;并JS来解决 .box{width: 100%;height: 100%;} .fixedbg{position: fixed;left: 0;top: 0;z-index: -1; width: 100%;height: 100%;} <div class="box"&...
background-attachment:local 在chrome中的渲染无效解决
FrontEndExplorerZ的博客
03-04 989
最近在学习 &lt; CSS 的秘密 &gt;一书,遇到如下问题:测试浏览器版本: Chrome 64.0.3282.186(64位)在用户体验一章-滚动提示小节中,按照书中实例利用背景渐变实现滚动条顶部和底部阴影时,发现背景使用两层渐变的情况下设置为background-attachment:local的那层遮罩无法跟随元素自身滚动,但是safari 中渲染正常.经过一番尝试,发现只有在元素自身...
Android设置全局Background（统一设置背景）
Austin的博客
10-11 5233
在Android移动端开发中，经常需要设置Activity的Background属性。如果项目的Activity并不多的话，那么可以在每个Activity的XML文件中分别设置它们的Background。可是一旦Activity太多，那么这个方法就不太现实了。所以需要找一个一劳永逸的好办法：只用一行代码，就完成设置所有Activity背景的需求。
postcss-px-to-viewport移动端与pc端
最新发布
09-04
postcss-px-to-viewport是一个用于将CSS中的像素单位（px）转换为视口单位（vw、vh、vmin或vmax）的PostCSS插件。它主要用于移动端开发，可以帮助开发人员更好地适应不同设备的屏幕尺寸。 在移动端开发中，由于不同设备的屏幕尺寸差异较大，使用固定像素单位（px）会导致页面在不同设备上显示效果不一致。而视口单位（vw、vh、vmin或vmax）是相对于视口大小而言的，可以根据不同设备的屏幕尺寸进行动态调整，从而实现更好的适配效果。 使用postcss-px-to-viewport插件，你可以将CSS中的像素单位转换为视口单位。通过配置插件参数，可以控制转换的比例、需要转换的像素单位等。这样，在编写CSS时，你可以使用常规的像素单位进行开发，插件会在构建过程中自动将其转换为合适的视口单位。 对于PC端开发，由于设备的屏幕尺寸相对较固定，使用固定像素单位（px）通常没有明显的问题。因此，在PC端开发中使用postcss-px-to-viewport插件并不是必须的。但如果你希望页面在不同尺寸的PC屏幕上具有更好的适配性，也可以考虑使用该插件进行适配。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值