Question

我在CSS中正在处理的两个div出现奇怪的样式问题。

这些div的要求是它们必须倾斜和平移（我正在通过转换进行），它们在背景上必须具有渐变，并且背景必须具有视差滚动。

问题在于，这导致背景图像的一部分不受渐变的影响。

我在这些div上使用的当前代码如下：

HTML：

<div class="diag gradient-bg2">
    <div class='diag-wrapper banner3'>
        <h1><?=$banner3Header1?></h1>
        <p><?=$banner3Content1?></p>
    </div>
</div>
<div class="diag gradient-bg3">
    <div class='diag-wrapper banner4'>
        <h1><?=$banner4Header1?></h1>
        <p><?=$banner4Content1?></p>
        <a class="btn" id="get-started-btn">ASK AN EXPERT</a>
    </div>
</div>

CSS：

.diag {
    padding: 5% 20px;
    -webkit-transform: skewY(-3deg) translateY(-5vw);
    -moz-transform: skewY(-3deg) translateY(-5vw);
    -ms-transform: skewY(-3deg) translateY(-5vw);
    -o-transform: skewY(-3deg) translateY(-5vw);
    transform: skewY(-3deg) translateY(-5vw) ;

} 
/*this unskews the content in a skewed div. It should be the opposite of above values**/
.diag > .diag-wrapper {
    padding-top:5vh;
    -webkit-transform: skewY(3deg);
    -moz-transform: skewY(3deg);
    -ms-transform: skewY(3deg);
    -o-transform: skewY(3deg);
    transform: skewY(3deg);
}
.gradient-bg2{
    margin:0;
    background: linear-gradient(0deg,rgba(255, 255, 255, 0.97),rgba(255, 255, 255, 0.7)), url("../img/mri.png") 50%; 
     height: 100%; 
     background-attachment: fixed;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
}
.gradient-bg3 { 
    margin:0;
    background: linear-gradient(to right,rgba(11, 179, 199, 1),rgba(154, 202, 73, 0.7)), url("../img/mri2.png"); 
     height: 100%; 
     background-attachment: fixed;
     background-position: right;
     background-repeat: no-repeat;
     background-size:auto 100%;
}
.banner3{
    text-align: center;
    padding: 10vh 20vw 10vh 20vw;
}
.banner4{
    color:white;
    padding-top:10vh;
    padding-bottom:10vh;
    padding-left:16vw;
    padding-right:57vw;
}

需要注意的是，除了渐变误差外，这些div的功能完全符合要求。这是问题外观的屏幕截图：

First Div

Second Div

有人知道什么可能导致此问题，以及如何解决此问题？

在视差div上进行转换后，我的背景渐变没有覆盖整个背景

0 个答案: