使用css过滤背景图像（悬停）时如何保持文本颜色？

Question

我想使背景图像变暗，但是文本颜色会发生变化，以及如何避免它？我尝试了背景：-moz-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%), url(./img/1,jpeg ) 但在这种情况下，我必须在最后添加 url，但这不是有效的方式，因为在这种情况下我有 4 张图片。

HTML

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
    crossorigin="anonymous">
 <div class="card-group">
      <div class="card img1">


        <div class="info">
          <h5 class="card-title">Planning</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
        </div>

      </div>
      <div class="card img2">


       <div class="info">
          <h5 class="card-title">Customer Satisfaction</h5>
          <p class="card-text">Lorem ipsum dolor .</p>
        </div>

      </div>
      <div class="card img3">

          <div class="info">
              <h5 class="card-title">Build</h5>
              <p class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
            </div>
      </div> 
         <div class="card img4">

          <div class="info">
              <h5 class="card-title">Analyse</h5>
              <p class="card-text">Lorem ipsum dolor sit amet, consetetur.</p>
            </div>
      </div> 

    </div>

CSS

    .card{
        min-height:30vh;
        display: inline-block; 
     }


    .card .info {
        position:absolute;;
        padding:0em 1em;
        bottom:0.5em;

        visibility:hidden;
        color:#5383d3;

        }
        .card-title {
            font-size:1.5em;
            margin-bottom: .1em;
        }
        .card-text {
            font-size:1em;

        }
        .card:hover{
            -webkit-filter: grayscale(150%); /* Safari 6.0 - 9.0 */
            filter: grayscale(150%);

        }
        .card:hover .info  {
        visibility:visible;


        }
  .img1{
    background: url("./img/1.jpeg") no-repeat center center;
  }
  .img2{
    background: url("./img/2.jpg") no-repeat center center;
  }
  .img3{
    background: url("./img/3.jpeg") no-repeat center center;
  }
  .img4{
    background: url("./img/4.jpg") no-repeat center center;
  }

另一个问题是图像之间的空白间距，即使我的 cs 中没有边框，看起来好像有

Answer 1

您不能只更改背景图像而不更改其内容。不过，您可以使用伪元素作为叠加层。这还有另一个优势，因为您可以通过这种方式更轻松地制作动画。

.card {
    position: relative;
}
.card:before {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background: rgba(96, 69, 56, 0.5);
    pointer-events: none;
}

Answer 2

要使用过滤器，您必须稍微修改一下您的 html。

<div class="card">
    <div class="img1 img"></div>
    <div class="info">
        <h5 class="card-title">Planning</h5>
        <p class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
    </div>
</div>

现在你可以像这样使用你的css了：

.card {
    position: relative;
}

.card .img {
     position: absolute;
     left: 0px;
     top: 0px;
     bottom: 0px;
     right: 0px;
}

.card:hover .img {
     filter: grayscale(100%);
}

Answer 3

第二个问题的问题是一个经常发生的简单错误。显示内联块解释元素之间的空白，因为它期望一些内联行为。您可以删除 div class="card" 之间代码中的所有空格（听起来很奇怪但有效），或者更好地使用 display: flex

.card-group {
    display: flex;
    justify-content: center;
}
.card {
    flex-basis: 25%;
}