vue项目在body设置公共的背景前提下,区分首页背景图和其他页面背景图

1.需求:在vue项目已设置统一的body背景图的前提,单独给首页换一个背景图,然后其他页面背景图不变的临时需求

实现思路1:在首页home.vue中

在公共的style.css文件中写上两个背景样式(写在公共样式中是因为style.css比组件内部的先加载,避免页面出现后背景空白的问题)

body {
 (添加这个样式是为了在除首页之外的页面刷新页面时,会丢失otherBg类名,导致其他页无背景图片的情况)
  margin: 0;
  padding: 0;
  background: url(../img/bg.gif) no-repeat 100px 60px #1a1a58;
  background-attachment: fixed;
  background-size: 100% 100%;
  overflow-x: hidden
}
.homeBg{
  background: url(../img/bgNew.jpg) no-repeat 100px 60px #1a1a58;(以下多余的样式是为了使背景图铺满屏幕)
  margin: 0;
  padding: 0;
  background-attachment: fixed;
  background-size: 100% 100%;
  overflow-x: hidden
}

.otherBg{
  background: url(../img/bg.gif) no-repeat 100px 60px #1a1a58;
  margin: 0;
  padding: 0;
  background-attachment: fixed;
  background

你可能感兴趣的:(前端,javascript,开发语言)