После преобразования Parallax div мой градиент фона не покрывает весь фон - PullRequest
Новая
       12

После преобразования Parallax div мой градиент фона не покрывает весь фон

0 голосов
/ 14 ноября 2018

У меня странная проблема стилей с двумя div-ами, над которыми я работаю в css.

Требования этих 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;
}

Следует отметить, что помимо ошибки градиента, эти функции работают точно так же, как требуется. Вот скриншот того, как выглядит проблема:

Первый Див

Второе деление

Кто-нибудь знает, что может быть причиной этой проблемы и как эта проблема может быть решена?

...