Question

我正在CargoCollective对我的网站进行编码。我希望主页的背景图像与其他图像不同，确切地说我希望它有一个全尺寸的GIF，而其他页面应该只有背景颜色。我确实找到了全尺寸背景的CSS代码，但问题是，当我首先访问主页然后通过侧边栏的链接访问其他页面时，背景图像仍然存在，而不是转向{{1 }}。奇怪的事实是，每当我刷新页面或直接转到它们（没有从主页传递）时，该背景图像就不会显示，而是我选择的颜色。问题是什么？

background-color

Answer 1

一种方法是简单地在主页上添加内联代码：

<body style="url(background:url(myGif.gif) no-repeat 0 0;background-size: cover;"/>

第二种方法是在加载主页时用javascript / jQuery覆盖css：

$('body').css({'background-image': 'url(myGif.gif)', 'background-size':'cover'});

第三种方法是简单地添加一个附加背景的全屏div：

＆＃13;

html,body{height:100%;padding:0;margin:0;}
body{
  background:#000;
}
#coverDiv{
  height:100%;
  width:100%;
  background:url(https://media.giphy.com/media/9fbYYzdf6BbQA/giphy.gif);
  background-size:cover;
}

＆＃13;

<div id="coverDiv">
 This div goes on my home page only.
</div>

＆＃13;

Answer 2

尝试将此类添加到样式表中。它将涵盖您从主页导航到另一个页面的情况。 css的规则是最具体的类/选择器优先获胜，你遇到的问题是body比body.home更通用它也需要是相同的属性，所以背景而不是background-color。

body.home.open {
    background: #ffe0e0;
    color: #f54a63;
    font-family: sans-serif;
    font-size: 14px;
    text-align: left;
    line-height: 2;
    position: relative;
    top: -40px;
    width: 100%;
}

主页背景图片依旧

2 个答案: