Question

我遇到了这个案子的问题。

html代码：

$WORKSPACE/tools/hudson.model.JDK/Java_8/jre/lib/security/cacerts

css：

<div class="col-md-4 col-12 kotakartikelhome1">
   <div class="sentence">               
   </div>
</div>

我只是在滤镜中为kotakartikelhome1设置了降低亮度，因为我将它设置为我的背景图像。然后当我把任何东西放在句子的类中时，一切都变暗，如何设置那些过滤器只影响第一个div？

Answer 1

filter是一个css属性，它会影响整个div，从而影响其中的任何内容。因此，所有儿童div也将在前面设置过滤器＆＃39;他们。

如果您只是想让背景图像变暗，那么我建议使用css3渐变回退。

background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('img/artikelhome1.jpg');

这将为您提供50％不透明度的黑色叠加效果。

Answer 2

检查出来：

＆＃13;

.kotakartikelhome1{
    background-image: url(http://via.placeholder.com/350x150);
    background-size: 100% 100%;
    transition-duration: 0.5s;
    height: 400px;
    filter: brightness(50%);
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1;
}
.sentence {
    color: #fff;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 9999;
}

＆＃13;

<div class="col-md-4 col-12">
  <div class="kotakartikelhome1"></div>
   <div class="sentence">        
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto sit excepturi quod nam molestias! Sit deleniti odit harum repellendus quam molestiae, natus commodi sint accusantium animi eos, ad tempore!
   </div>
</div>

＆＃13;

Answer 3

在第一个元素上添加一个id并为其添加样式。

<div class="col-md-4 col-12 kotakartikelhome1" id="darken">
   <div class="sentence">               
   </div>
</div>
<div class="col-md-4 col-12 kotakartikelhome1">
   <div class="sentence">               
   </div>
</div>

<style>
    .kotakartikelhome1{
        background-image: url("img/artikelhome1.jpg");
        background-size: 100% 100%;
        transition-duration: 0.5s;
        height: 400px;
        position: relative;
    }

    #darken{
        filter: brightness(50%);
    }

    .sentence{
        filter: brightness(100%);
    }
</style>

css仅影响第一个div

3 个答案: