css - 取消背景 :#fff without cancelling out background-image

标签 css background-image background-color

This Wordpress front page使用子主题。

父主题包含 CSS:

body {
    background: #fff;
}

这个首页使用 CSS:

body.home {
    background-image: url(http://www.fleeceitout.com/images/field.2.jpg) !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-attachment: fixed;
}

但是,background-image 规则正在被 background 规则覆盖(我相信),因此 body页面没有背景图片。

我使用什么 CSS 来消除 background: #fff; 规则,以便 body 包含背景图像?

最佳答案

However, the background-image rule is being overridden by the background rule (I believe), and hence, the body of the page does not have a background image.

你错了。

body 不如 body.home 具体,因此会首先应用并被 body.home 覆盖。

即使不是这种情况,!important 规则也会让 background-image 最后应用。

您的问题是 http://www.fleeceitout.com/images/field.2.jpg 导致服务器拒绝连接。


如果我将 URL 替换为有效的 URL,您会遇到第二个问题(尽管不是可以使用您问题中的代码重现的问题)。

body 元素完全被 div#fullPage 元素覆盖,后者具有白色背景色。您必须将其设置为透明才能通过它看到 body 的背景。

关于css - 取消背景 :#fff without cancelling out background-image,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31789716/

相关文章:

javascript - 我可以让 html 标签根据屏幕尺寸工作吗?

javascript - 在特定滚动位置淡出

jquery - 动态设置时从 div 检索背景图像

css - 导航背景图像 100% 页面高度

html - 在 border-radius 外添加样式

css - 在现有形状周围添加带有背景颜色的更大形状

html - 如何在悬停时同时突出显示文本和背景颜色?

css - 如何让 Internet Explorer 8 支持第 n 个 child() CSS 元素?

没有任何属性的元素的 JQuery 选择器

css - 放大时背景图像中出现间隙