CSS - 仅放大背景(无叠加文本)

Question

我正在尝试使背景图像放大效果。下面的代码表示一个具有图像背景的可单击元素。我遇到的问题是它会放大该div 中的所有内容，包括子div。我只想放大背景图像(保持叠加文本不变(

<a class="outer-tile tile-text" href="#">
<div class="inner-tile d-flex flex-column align-items-start" style="background-image: url('https://picsum.photos/200/300')">
<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>
</div>
</a>

.outer-tile {
overflow: hidden;
height: 400px;
}
.inner-tile {
height: 100%;
width: 100%;
background-size: cover;
background-position: center;
transition: all 0.5s ease;
}
.inner-tile:hover {
transform: scale(1.2);
}

下面是一个代码笔：

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

Answer 1

您可以将背景图像放置在与文本元素同级(而不是父元素(的同级元素上。然后使用定位和 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>

https://codepen.io/anon/pen/NLyYKY