给页面追加背景颜色和背景图片(兼容ios,pc)，页面在背景图上悬浮滚动

赵啸林

于 2022-12-28 14:55:18 发布

阅读量167

点赞数

分类专栏： vue3 前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_49295874/article/details/128468448

版权

前端同时被 2 个专栏收录

43 篇文章 0 订阅

订阅专栏

29 篇文章 1 订阅

订阅专栏

1.页面

<template>
	<div class="bind_bg"></div> <!-- 这是追加的dom -->
	<div class="container"></div><!-- 这是页面dom -->
</template>

2.js

//页面加载时延迟加载100ms
 setTimeout(() => {
   let bg = "你的背景图片";
   let bc = "你的背景颜色";
   $(".bind_bg").append(`<style>.bind_bg:before{background-image: url(${bg});background-color:${bc}}</style>`);
}, 100);//兼容ios的处理

3.css

.bind_bg {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;//不兼容ios
  position: fixed;
  width: 375px;
  height: 100%;
  z-index: 0;
}
.bind_bg:before {
  content: " ";
  position: fixed;
  width: 375px;
  height: 100%;
  z-index: 0;
  bottom: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-size: cover;
}