html - 背景颜色和图像之间的 CSS 淡入淡出

Question

我用一些 Tiles 制作了一个简单的 CSS Grid，目前，我正在尝试设置这些 tiles，以便当您将鼠标悬停在它们上方时出现背景，我尝试了过渡标签，但它不起作用。尝试了一些来自 Web 的解决方案，但它们不适用于网格系统。我正在尝试在图像出现之前添加一点延迟。

.box1 {
  background: #6fc3df;
  grid-area: 1 / 1 / 2 / 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box1 h1 {
  margin-left: 1em;
}

.box1:hover {
  background-image: url("images/pic02.jpg");
}

<div class="tiles">
  <div class="box box1">
    <h1>Test</h1>
  </div>
  <div class="box box2">
    <h1>Test</h1>
  </div>
</div>

Answer 1

只是一个小技巧。

包装 div，它需要用预期的背景淡化另一个 div，并在鼠标悬停在其上时使 child 的背景透明。

注意:OP 想用多个具有不同图像的 div 来做到这一点。所以这是一个包含两个 div 的示例。

#wrapper-1{
  background: url("https://via.placeholder.com/100x50") rgba(111, 195, 223, 1);
}

#wrapper-2{
  background: url("https://via.placeholder.com/200x100") rgba(111, 195, 223, 1);
}

.box1, .box2 {
    grid-area: 1 / 1 / 2 / 3 ;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: background 0.5s ease;
    background: rgba(111, 195, 223, 1);
}

.box1 h1, .box2 h1{
    margin-left: 1em;
}

.box1:hover, .box2:hover{
  background: rgba(111, 195, 223, 0);
}

<div class="tiles">
    <div id="wrapper-1">
      <div class="box box1">
        <h1>Test</h1>
      </div>
    </div>
    <div id="wrapper-2">
      <div class="box box2">
          <h1>Test</h1>
      </div>
    </div>
</div>