background-attachment:fixed不兼容性

最新推荐文章于 2025-05-20 16:10:39 发布

转载最新推荐文章于 2025-05-20 16:10:39 发布 · 708 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xuniannian/p/8444526.html

文章标签：

#前端 #移动开发 #ViewUI

本文介绍了一个解决iOS系统和其他移动端不支持CSS background-attachment: fixed属性问题的方法。通过使用:before伪元素并设置固定定位，实现背景图片在滚动时保持不动的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ios系统和某些移动端background-attachment:fixed不兼容性，没有任何效果，但可以hack一下就可以了，代码如下:

ps：想在哪个标签加背景，可以在它class后:before.

body:before {
  content: ' '; position: fixed; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; background: url(path/to/image) center 0 no-repeat; background-size: cover; }

转载于:https://www.cnblogs.com/xuniannian/p/8444526.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30618985

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

CSS background-attachment 属性

shengyin714959的博客

09-06

103

background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。默认值:scroll继承:no版本:CSS1object。

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

夏尔的小酒馆

12-15

1399

问题背景想做一个固定背景的移动端网站，结果发现「background-attachment」竟然不起作用，具体出现在iOS Safari浏览器上。出现原因查询stackoverflow得知出现问题的原因是background-attachment属性在移动端重绘的成本很高，并且滚动表现也不尽人意，所以在一些移动端是被禁止的。解决方案目前有一个成本较低的hack方案，但是效果对于追求完美者可能稍有缺憾。具体的代码是： body::before { content: ''

参与评论您还未登录，请先登录后发表或查看评论

ios系统和某些移动端background-attachment:fixed不兼容性

weixin_30377461的博客

08-01

196

固定背景不动：background-attachment:fixed; ios系统和某些移动端background-attachment:fixed不兼容性，没有任何效果，但可以hack一下就可以了，代码如下: ps：想在哪个标签加背景，可以在它class后:before. body:before { content: ' '; position: fixed; z-index: -1...

【background】CSS 背景全解析：从基础属性到视觉魔法

waterlin2011的博客

05-20

1287

CSS 背景属性用于定义HTML元素的背景。

微信小程序中background-attachment:fixed兼容问题

t800的博客

06-28

1286

在微信小程序的页面中使用了background-attachment:fixed;属性，在安卓机型中适用，但在苹果机型中失效了，导致背景图样式没有固定。固定背景导致重绘的成本很高，在苹果手机上该属性可能被禁止。在wxml的盒子定义个class,引入图片我用的是行内样式，使用js中的变量（主要解决动态背景图的需求） js wxss 结语此方法主要解决在微信小程序中固定背景图片且背景图为动态获取的需求。如果有更好的方法欢迎在评论区讨论^_^...

ios移动端部分手机不支持background-attachment: fixed 的解决办法

weixin_30437481的博客

02-07

650

ios_iphone_移动端background-attachment:fixed兼容性[失效]

setsunadoudou的博客

09-18

837

ios系统和某些移动端background-attachment:fixed不兼容性，没有任何效果，但可以hack一下就可以了，代码如下: ps：想在哪个标签加背景，可以在它class后:befo...

<!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>Document</title> <style> </style> </head> <body background="bgImage.jpg" style="background-repeat:no-repeat;background-attachment:fixed; background-size:100% 100%; "> </body> </html>

06-08

具体来说，`background-repeat:no-repeat` 表示不重复平铺背景图片，`background-attachment:fixed` 表示固定背景图片不随页面滚动而移动，`background-size:100% 100%` 表示背景图片的宽度和高度都填充整个页面。

IE6中的position:fixed定位兼容性写法分享

12-07

以上就是解决IE6中 `position:fixed` 兼容性的技巧。需要注意的是，这些方法仅适用于IE6，对于其他版本的IE或者现代浏览器，可以直接使用 `position:fixed`。在实际开发中，考虑到跨浏览器兼容性和性能，通常会结合...

background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1503220317375-aaad61436b1b?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80'); background-size: cover; background-position: center; color: white; text-align: center; padding: 150px 0; margin-bottom: 40px; } 将其中的背景图改为一个可以自动播放的世界风景合集的视频

最新发布

06-22

4. **浏览器兼容性**： - 提供 MP4 和 WebM 双格式 - 设置后备图片（当视频无法加载时显示原背景图） ### 注意事项 1. 视频文件需压缩优化（推荐使用 H.264 编码） 2. 移动端需添加 `playsinline` 属性 3. 视频时...

HTML中`background-attachment: fixed` 对 `background-size`的影响

qq_67226268的博客

04-29

275

时背景图看起来更小，而。

使用background-attachment：fixed固定背景图以及ios系统不兼容网页背景图片固定的解决方案

春风十里柔情的博客

10-15

2424

解决办法： 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，background......兼容问题

qq_24770809的博客

07-03

507

通常情况下，一些主流浏览器都兼容background、position等元素；但是，IE6不支持background、position等；以下，我为大家讲解IE6的兼容问题background，IE6、7的兼容方法#menu ul li a .current{ background:#ccc; _background:#ccc; /*IE 6*/ *background:#ccc

background-attachment:fixed在ios中失效

u014477038的专栏

06-15

5359

今天做了个页面，往页面中添加内容，添加多了才发现，背景图重复了，然后上网找解决办法，灵机一动，让背景图不动就好了，于是找到了background-attachment:fixed，在安卓中没问题，但是ios的微信无效，用Safari打开也是无效，后来找到一个hack的方法，不错，分享一下。 body:before { content: ' '; position: fixed;

uni-app - - - - - 小程序使用background-image无效？

Dark_programmer的博客

04-11

6078

小程序使用background-image无效

关于背景图片background-attachment: fixed属性在Chrome浏览器中失效的问题解决。

好名字都被抢完了的博客

06-07

3066

关于背景图片background-attachment: fixed;属性在谷歌浏览器中失效的问题解决。最近在做文件打印的功能操作。我选择使用简单易用的window.print()来打印整个页面。具体操作网上有很多相关的方法，这里不再一一叙述。只在此说一下在打印背景图片时遇到的问题及解决方法。首先，背景图片设置好之后我对其进行平铺和固定设置如图所示。我的本意是将一个不大的图片平铺整个页面，并且打印时即使页面内容过多导致分页也能继续显示背景图片。但我使用谷歌浏览器时，出现问题。background-a

html 兼容性设置,css属性兼容性详解

weixin_39827585的博客

06-11

646

对于前端工程师来说，不想面对又不得不面对的一个问题就是兼容性。在几年之前，处理兼容性，一般地就是处理IE低版本浏览器的兼容性。而近几年，随着移动端的发展，工程师也需要注意手机兼容性了。本文将详细介绍CSS兼容性。盒模型属性【宽高width/height】(全兼容)widthheight(IE6-不支持)min-widthmax-widthmin-heightmax-height【内边距paddin...

关于css背景属性background-attachment：fixed的问题

weixin_49404977的博客

01-25

233

如果在一个有宽度和高度的盒子里，设置一个背景图片，并继续设置背景图片固定（background-attachment：fixed），此时背景图片的位置是相对与body来设置的，而不是该盒子本身。要将背景图像固定在视口中，可以使用CSS的background-attachment属性，并将其设置为fixed。此属性将指定背景图像相对于视口固定位置，而不是相对于元素本身的位置滚动。