解决移动端background-attachment:fixed的不兼容性,hack如下:

body {

background: #040019;

}

body:before {

content: "";

background: url(../img/beiJing3.png) no-repeat;

background-size: 100%;

position: fixed;

top: 1rem;

left: 0;

bottom: 0;

right: 0;

z-index: -1;

}

因为background-attachment:fixed属性在移动端不兼容,所以我这里直接弃用了background-attachment:fixed属性,在body背景前添加了一个伪类,固定好位置不随滚动条滚动的特效就出来了。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第一章 F12: element.style 内联样式(可以直接在上面写代码进行简单调试) user agent...
    fastwe阅读 5,469评论 0 0
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 5,552评论 0 6
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,265评论 1 45
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 8,404评论 0 11
  • 生活中非常多沟通的场景问一句话,对方回复说“不知道”。当学生考试结束的时候家长忍不住想问下考得怎么样啊,这时通常能...
    轻尘记事阅读 2,994评论 4 3

友情链接更多精彩内容