代码之家 › 专栏 › 技术社区 › Wasteland

CSS-仅放大背景(无覆盖文本)

zoom bootstrap-4 background css

Wasteland · 技术社区 · 6 年前

我试着放大背景图像。下面的代码表示一个带有图像背景的可单击元素。我的问题是,它放大了该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 :

1 回复 | 直到 6 年前

Jason bamber 6 年前

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