修复了背景缩放转换，而不影响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(https://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

如果元素没有从其父继承的宽度和高度

将背景图像放在一个伪元素上，然后是：

• 用position: absolute和left: 0/top: 0 定位

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

• 将CCD_ 8和CCD_。

伪元素的父元素被赋予CCD_ 10。

#cont-nl {
    height: 60vh;
    position: relative;
    overflow: hidden;
}
#cont-nl:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    background: url(https://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

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

将背景图像放在一个伪元素上，然后是：

• 用position: absolute定位并用设置为0 的left / right / bottom / left拉伸

• 给定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(https://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属性的本地支持。诸如transform和transition之类的属性具有极好的浏览器支持，并且前缀通常是不必要的。