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

这里是 codepen:

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

Answer 1

您可以将背景图像放置在与文本元素同级的元素上，而不是父元素。然后用positioning和z-index放在他们后面：

.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

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

CSS - Zoom in background only (no overlay text)

background

zooming

bootstrap-4