CSS-仅放大背景（无覆盖文本）

我试着把背景图像放大。下面的代码表示一个具有图像背景的可单击元素。我的问题是，它放大了该div中的所有内容，包括子div。我只想放大背景图像（保留覆盖文本不变）

.外瓷砖{
溢出：隐藏；
高度：400px；
}
.内瓦{
身高：100%；
宽度：100%；
背景尺寸：封面；
背景位置：中心；
过渡：所有0.5s缓解；
}
.内部瓷砖：悬停{
转换：比例（1.2）；
}

这里有一个：

---

如何只放大背景而不放大文本？

可以将背景图像放置在文本元素的同级元素上，而不是父元素上。然后使用定位和z索引将其放置在它们后面：

.outer-tile {
    overflow: hidden;
    height: 400px;
  position:relative;
}

.tile-underlay {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:-1;
    background-size: cover;
    background-position: center;
    transition: all 0.5s ease;
}

.outer-tile:hover .tile-underlay {
    transform: scale(1.2);
}

  <a class="outer-tile tile-text" href="#">
      <div class="tile-underlay d-flex flex-column align-items-start" style="background-image: url('https://picsum.photos/200/300')"></div>
      <div class="mb-auto p-2">
        <span class="b-dark p-1">MyTag</span>
      </div>
      <div class="b-dark w-100 p-2">
        <h3>My Title</h3>
        <p>This is the content</p>
      </div>

  </a>

。外部磁贴{
溢出：隐藏；
高度：400px；
位置：相对位置；
}
.瓷砖底层{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
z指数：-1；
背景尺寸：封面；
背景位置：中心；
过渡：所有0.5s缓解；
}
.外部瓷砖：悬停。瓷砖参考底图{
转换：比例（1.2）；
}

---

您可以将背景图像放置在文本元素的同级元素上，而不是父元素上。然后使用定位和z索引将其放置在它们后面：

.outer-tile {
    overflow: hidden;
    height: 400px;
  position:relative;
}

.tile-underlay {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:-1;
    background-size: cover;
    background-position: center;
    transition: all 0.5s ease;
}

.outer-tile:hover .tile-underlay {
    transform: scale(1.2);
}

  <a class="outer-tile tile-text" href="#">
      <div class="tile-underlay d-flex flex-column align-items-start" style="background-image: url('https://picsum.photos/200/300')"></div>
      <div class="mb-auto p-2">
        <span class="b-dark p-1">MyTag</span>
      </div>
      <div class="b-dark w-100 p-2">
        <h3>My Title</h3>
        <p>This is the content</p>
      </div>

  </a>

。外部磁贴{
溢出：隐藏；
高度：400px；
位置：相对位置；
}
.瓷砖底层{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
z指数：-1；
背景尺寸：封面；
背景位置：中心；
过渡：所有0.5s缓解；
}
.外部瓷砖：悬停。瓷砖参考底图{
转换：比例（1.2）；
}