Question

嗨，我有<div class="jumbotron text-center"><nav>something</nav></div>这行代码，而jumbotron具有一些CSS效果，例如

.jumbotron{
    background: url("image-url") no-repeat center center; 
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    background-size: cover;
    height: 78vh;
    filter: brightness(50%);
}

但我想要的只是仅，巨型飞机的背景图像会获得CSS效果，而不是nav标签。当前，nav标签继承了filter: brigtness (50%)，背景图像是否会仅获得效果？

Answer 1

否，不可能。 filter将影响当前元素及其所有内容（包括子元素）。

因此，这里的方法是将<nav>从.jumbotron移出，将它们包裹在一个公共相对父对象中，并在<nav>上方渲染.jumbotron。
概念证明：

.relative {
  position: relative;
}
.relative > .absolute {
  position: absolute;
  width: 100%;
  top: 0;
  /* making it visible */
  background-color: rgba(255,255,255,.25);
  border-bottom: 1px solid white;
  color: white;
  padding: 1rem;
  box-sizing: border-box;
}

.jumbotron{
  background: url("https://picsum.photos/id/237/1024/540") no-repeat center center /cover; 
  height: 78vh;
  filter: brightness(50%);
}

<div class="relative">
  <div class="jumbotron"></div>
  <nav class="absolute">something</nav>
</div>

可以随意重命名类并根据您的特定需求进行调整。

避免继承父母的css效果

1 个答案: