修复了背景比例转换而不影响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并将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属性的本机支持。 transform和transition等属性具有出色的浏览器支持，前缀通常是不必要的。