Как сохранить цвет текста при фильтрации фонового изображения (hover) с помощью CSS?

Question

Я хотел бы затемнить фоновые изображения, как бы менялись цвета текста, и как мне этого избежать?Я пытался с фоном: -moz-linear-Gradient (сверху, 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

Чтобы использовать фильтры, вам придется немного изменить свой 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 2

Проблема вашей второй проблемы - это простая ошибка, которая случается довольно часто. Display inline-block интерпретирует пробелы между элементами так, как ожидается некоторое встроенное поведение. Вы можете либо избавиться от всех пробелов в вашем коде между div class = "card" (звучит странно, но работает), либо еще лучше использовать display: flex

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

Answer 3

Вы не можете просто изменить фоновое изображение без изменения его содержимого.Вы можете использовать элемент псевдо в качестве наложения.Это имеет еще одно преимущество, так как вы можете легче анимировать таким образом.

.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;
}