时间戳

首页 > 解决方案 > 过渡影响背景图像

html - 过渡影响背景图像

问题描述

当我将鼠标悬停在 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>

标签： htmlcss

解决方案

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

我通过引入一个专用的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>

推荐阅读