html - 固定背景比例变换而不影响 div 内的文本

Question

我有一个涉及transform: scale 的问题。我想在悬停时慢慢放大我的背景，但我不希望它影响我的文字。 (我省略了浏览器前缀以缩短帖子的长度。)

这是我的 CSS:

#cont-nl {
    background: url('../img/nl.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 60vh;
    background-position: center;
    background-attachment: fixed;
    margin-right: auto;
    margin-left: auto;
    transition: transform 2s ease-in-out;
}


#cont-nl:hover {
    transform: scale(1.05);
    transition: transform 5s ease-in-out;
}

HTML:

 <div class="row" id="cont-nl">
        <div class="container t-blk-center">
            <div class="">
                <h1 class="align-left">Next Level Youth Ministry</h1>
                <div class="tab-brk"></div>
                <h3 class="align-left">For students 6th-12th grade.</h3>
            </div>
        </div>
 </div>

Answer 1

理想的解决方案

为 background-size 使用百分比或像素单位大小，并在悬停时过渡到更大的 background-size 以放大。

例子

#cont-nl {
  background: url(http://i.stack.imgur.com/cAEjm.jpg);
  background-repeat: no-repeat;
  background-size: 150%;
  height: 60vh;
  background-attachment: fixed;
  margin-right: auto;
  margin-left: auto;
  background-position: center;
  transition: background-size 6s;
}
#cont-nl:hover {
  background-size: 200%;
}

<div class="row" id="cont-nl">
  <div class="container t-blk-center">
    <div class="">
      <h1 class="align-left">Next Level Youth Ministry</h1>
      <div class="tab-brk"></div>
      <h3 class="align-left">For students 6th-12th grade.</h3>
    </div>
  </div>
</div>

限制

截至 2016 年 4 月，这不适合用于居中背景图像。这些会导致所有浏览器出现错误、跳动的过渡。

---

替代方案

示例 1

如果元素没有继承父元素的宽高

将背景图像放在 pseudo-element 上，然后是:

• 使用 position: absolute 和 left: 0/top: 0

  定位

• 给定 z-index: -1 以确保它将在文本下方分层

• 将 height: 60vh 和 width: 100vw 设置为与父项匹配的值。

伪元素的父元素被赋予 position: relative。

#cont-nl {
    height: 60vh;
    position: relative;
    overflow: hidden;
}

#cont-nl:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    background: url(http://i.stack.imgur.com/cAEjm.jpg) no-repeat;
    background-position: center;
    background-size: cover;
    transition: transform .5s ease-in-out;
    z-index: -1;
}

#cont-nl:hover:before {
    transform: scale(1.05);
    transition: transform .5s ease-in-out;
}

<div class="row" id="cont-nl"> 
        <div class="container t-blk-center">
            <div class="">
                <h1 class="align-left">Next Level Youth Ministry</h1>
                <div class="tab-brk"></div>
                <h3 class="align-left">For students 6th-12th grade.</h3>
            </div>
        </div> 
 </div>

---

例子2

如果高度和宽度可以从父级继承

将背景图像放在 pseudo-element 上，然后是:

• 定位 position: absolute 并拉伸(stretch) left/right/bottom/left 设置为 0

• 给定 z-index: -1 以确保它将在文本下方分层

伪元素的父元素被赋予 position: relative。

#cont-nl {
    height: 60vh;
    position: relative;
    overflow: hidden;
}

#cont-nl:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    background: url(http://i.stack.imgur.com/cAEjm.jpg) no-repeat;
    background-position: center;
    background-size: cover;
    transition: transform .5s ease-in-out;
    z-index: -1;
}

#cont-nl:hover:before {
    transform: scale(1.05);
    transition: transform .5s ease-in-out;
}

<div class="row" id="cont-nl"> 
        <div class="container t-blk-center">
            <div class="">
                <h1 class="align-left">Next Level Youth Ministry</h1>
                <div class="tab-brk"></div>
                <h3 class="align-left">For students 6th-12th grade.</h3>
            </div>
        </div> 
 </div>

关于浏览器前缀的说明

前往 caniuse.com检查对 CSS 属性的 native 支持。 transform 和 transition 等属性具有出色的浏览器支持，通常不需要前缀。