当前位置: 首页 > news >正文

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
http://www.lryc.cn/news/117360.html

相关文章:

  • 测试人员该怎样写软件缺陷报告?
  • 【大数据】Flink 详解(二):核心篇 Ⅱ
  • 一孩半政策
  • 如何在 Spring Boot 中集成日志框架 SLF4J、Log4j
  • 如何在Linux布置nginx(附带Nginx基本操作步骤)
  • Xcode升级导致关联库报错
  • 利用docker run --rm 命令实现使用宿主机中没有的命令
  • 中级课程——XSS
  • win10+Vmware+ubuntu18 mosquitto调试记录
  • Java EE 突击 9 - Spring Boot 日志文件
  • 篇十六:命令模式:封装请求
  • Android 系统框架
  • 【Hystrix技术指南】(3)超时机制的原理和实现
  • MySQL: Failed to Connect to MySQL at XXXX:3306 with user root
  • 《大型网站技术架构设计》第二篇 架构-性能
  • 谷歌推出AI模型机器人RT2 将文本和图像输出为机器人动作
  • 常见的服务器安全管理漏洞
  • JavaScript高级:探索作用域链的神秘面纱
  • mysql数据库如何转移到oracle
  • nnU-Net 终极指南
  • ubuntu 安装 python
  • 【腾讯云 Cloud studio 实战训练营】云端 IDE 构建移动端H5
  • Kubernetes 之 Kubeadm 搭建
  • Qt应用开发(基础篇)——堆栈窗口 QStackedWidget
  • 浅谈测试开发岗位
  • 典型移动APP安全风险提醒
  • 多平台发布文章-项目总结
  • 什么是IoC?什么是Spring IoC?什么是DI?
  • 分布式任务调度平台XXL-JOB学习笔记-helloworld运行
  • 维护工程师提升设备管理水平的5个技巧