Html 为什么css背景大小/位置不适用于速记背景url？

我当时正在构思一个幻灯片/单页网站的想法，当时我正处于一个很好的停顿点。因为我把我的想法的要点记在了一本书上，所以我开始整理我的

css

。在5个选项卡中的每一个选项卡上，除了背景图像之外，它们都使用相同的

css

这就是我使用css的方式（工作一个）

这对我来说有点难看，所以我想我会把它清理干净，简化成这样

用这个,

#p-home, #p-about, #p-work, #p-contact, #p-blog {
    background-size: cover;
    background-position: center center;
}

使div忽略这两行

css

。我看不出我的代码有任何错误，而且当我检查控制台时，它说css是无效的属性值，我不能100%确定为什么没有使用css

---

有什么想法吗？

您必须使用

背景图像

而不是速记

背景

属性。速记

background

将

background size

和

background position

重置为其默认值，这就是第一条规则最终不执行任何操作的原因

---

将共享CSS移到文件中的最后一位也会使它通过拥有最后发言权来工作，尽管这当然不是一个真正的解决方案。

您必须使用

背景图像

而不是速记

背景

属性。速记

background

将

background size

和

background position

重置为其默认值，这就是第一条规则最终不执行任何操作的原因

---

将共享CSS移到文件的最后一个位置也会使它通过拥有最后发言权来工作，尽管这当然不是一个真正的解决方案。

知道这一点很好，但是，您测试过吗？我只是做了那些改变，它把图像全部删除了。@JoshPowell:没有，但我知道这是真的。让我编一个例子。你知道为什么它会把它都放在我的小提琴上吗@乔希·鲍威尔：啊，是的——你在结尾还有

无重复

（我没有一直滚动）。显然，这不是

背景图像

的有效值，如果要设置它，请使用共享规则上的

背景重复：无重复

进行设置。啊，我明白了，我明白了，这确实解决了问题。我被允许只在背景上使用

无重复

，对吗？知道这一点很好，但是，你测试过吗？我只是做了那些改变，它把图像全部删除了。@JoshPowell:没有，但我知道这是真的。让我编一个例子。你知道为什么它会把它都放在我的小提琴上吗@乔希·鲍威尔：啊，是的——你在结尾还有

无重复

（我没有一直滚动）。显然，这不是

背景图像

的有效值，如果要设置它，请使用共享规则上的

背景重复：无重复

进行设置。啊，我明白了，我明白了，这确实解决了问题。我可以在背景上使用

无重复

，对吗？

#p-home, #p-about, #p-work, #p-contact, #p-blog {
    background-size: cover;
    background-position: center center;
}

#p-home {
    background: url("http://upload.wikimedia.org/wikipedia/commons/e/e5/Neuschwanstein_Castle_LOC_print.jpg") no-repeat;
}

#p-about {
    background: url("http://upload.wikimedia.org/wikipedia/commons/4/4d/Balmoral_Castle.jpg") no-repeat;
}

#p-home, #p-about, #p-work, #p-contact, #p-blog {
    background-size: cover;
    background-position: center center;
}