html - 过渡影响背景图像

Question

当我将鼠标悬停在 div 上时，背景图像也会移动。如果我删除此行 transition:transform 0.2s; 然后背景图片没有朝正确的方向移动。为什么会这样？我在这里附上了codepen链接: https://codepen.io/SowmiyaPachiappan/pen/RwbpjvN

请帮助我。如何解决？

section {
  padding: 10rem 0;
  background-image: linear-gradient(to right bottom, rgba(126, 213, 111, 0.8), rgba(40, 180, 133, 0.8)), url(https://i.ytimg.com/vi/eQBu3UBQby0/maxresdefault.jpg);
  background-size: cover;
  -webkit-transform: skewY(-6deg);
  transform: skewY(-6deg);
  color: #777;
}

section>* {
  -webkit-transform: skewY(6deg);
  transform: skewY(6deg);
}

.row {
  max-width: 1140px;
}

row:not(:last-child) {
  margin-right: 60px;
}

.col-1-of-4 {
  width: calc(100% / 4);
}

.feature-box {
  background-color: rgba(255, 255, 255, 0.6);
  padding: 10px;
  border-radius: 3px;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}

.feature-box:hover {
  -webkit-transform: translateY(-15px);
  transform: translateY(-15px);
}

<section>
  <div class="row">
    <div class="col-1-of-4">
      <div class="feature-box">
        <h3 class="heading-tertiary u-margin-bottom-small">Explore the world</h3>
        <p class="feature-box__text">
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ducimus optio laborum
        </p>
        <div>
        </div>

      </div>
</section>

Answer 1

我在浏览器中看不到问题，但也许这有帮助。

我通过引入专用的 div.background 来分离背景(包括倾斜)和文本内容。

section {
  padding: 10rem 0;
  color: #777;
  position: relative;
}

section>.background,
section>.background:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

section>.background {
  -webkit-transform: skewY(-6deg);
  transform: skewY(-6deg);
  overflow: hidden;
}

section>.background:after {
  content: '';
  background-image: linear-gradient(to right bottom, rgba(126, 213, 111, 0.8), rgba(40, 180, 133, 0.8)), url(https://i.ytimg.com/vi/eQBu3UBQby0/maxresdefault.jpg);
  background-size: cover;
  -webkit-transform: skewY(6deg);
  transform: skewY(6deg);
}

.row {
  max-width: 1140px;
}

row:not(:last-child) {
  margin-right: 60px;
}

.col-1-of-4 {
  width: calc(100% / 4);
}

.feature-box {
  background-color: rgba(255, 255, 255, 0.6);
  padding: 10px;
  border-radius: 3px;
  transition: -webkit-transform 0.2s, transform 0.2s;
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
}

.feature-box:hover {
  -webkit-transform: translateY(-15px);
  transform: translateY(-15px);
}

<section>
  <div class="background"></div>
  <div class="row">
    <div class="col-1-of-4">
      <div class="feature-box">
        <h3 class="heading-tertiary u-margin-bottom-small">Explore the world</h3>
        <p class="feature-box__text">
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ducimus optio laborum
        </p>
      </div>
    </div>

  </div>
</section>