Question

我在这里遇到了一个难题（我想）。假设以下HTML：

<div id="page">
   <div id="menubar"></div>
</div>

定义了以下CSS：

#page {
   background: url("some-image.png") no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover; 
   -o-background-size: cover;
   background-size: cover;
}

#menubar {
    background-color: rgb(36, 108, 228);
    background-color: rgba(0, 50, 255, 0.6);
}

总之，我有一个页面div，一个完全覆盖的背景图像和一个60％不透明度的菜单栏，所以div #page的背景通过菜单栏闪耀。但是，我希望通过菜单栏照射背景并反转背景的颜色，它通过菜单栏照射。

我无法在线找到解决方案，因为根据我的意识，反转滤镜只能应用于整个图像。因此，我真的希望SO上的某个人知道一些很好的技巧来推动它。

提前致谢！

Answer 1

从技术上讲，你不需要＆＃34;目标＆＃34;父母的背景图片。

在CSS中，您可以inherit将父元素的属性添加到子元素中。

#page {
    background: url("http://lorempixel.com/1280/720/nature/") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover; 
    -o-background-size: cover;
    background-size: cover;
}

/* Copy the parent's image properties */
#menubar {
    background: inherit;
}

另一种选择是在同一声明中只有#page和#menubar选择器。

#page, #menubar {
    background: url("http://lorempixel.com/1280/720/nature/") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover; 
    -o-background-size: cover;
    background-size: cover;
}

无论哪种方式，一旦您为#menubar提供相同的背景，就可以添加另一条规则来反转#menubar上的颜色。

#menubar {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

JSFiddle

注意：在#menubar内的子元素添加了反转和背景颜色以还原颜色。

用CSS反转父元素的背景图像

1 个答案: