Как поместить фигуры (преобразовать) друг на друга с помощью :: before и :: after в CSS?Край не будет отображать форму на фоне - PullRequest
Новая
       49

Как поместить фигуры (преобразовать) друг на друга с помощью :: before и :: after в CSS?Край не будет отображать форму на фоне

0 голосов
/ 27 июня 2019

Я создал две наклонные фигуры, которые будут отображаться поверх контейнера с фоновым изображением.Я использовал ::before и ::after, чтобы получить фигуры на одном и том же изображении.

Он работает в Firefox и Chrome, но не в кромке.

Чего мне не хватает?

Это то, что я хочу и что происходит в Chrome:

https://www.dropbox.com/s/bny60o505cz2f2k/screen1.png

Это то, что происходит в Edge: https://www.dropbox.com/s/ix6v8gyxq0y6eo4/screen2.png

Синяя фигура имеет ::before, но ::before не отображается в Edge.(когда я придаю синей форме псевдоэлемент ::before, он отображается, но тогда белая форма невозможна. 

.titelsectie {
    z-index:0!important;
    background-color: rgba(255,255,255,0);
    background-image: url(https://images.pexels.com/photos/2404370/pexels-photo-2404370.jpeg);
    background-position: center center;
    background-repeat: no-repeat;
    padding-top: 0px;
    padding-right: 30px;
    padding-bottom: 0px;
    padding-left: 30px;
    margin-bottom: 40px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-left: -30px;
    margin-right: -30px;
    position: relative;
    z-index: 0!important;
    padding-top: 100px!important;
}
.titelsectie::after{
    content: " ";
    background-color: #ffffff;
    position: absolute;
    width: 10%;
    height: 100%;
    left: -8%;
    top: 0;
    z-index: 0!important;
    transform-origin: bottom left;
    -ms-transform: skew(-16deg, 0deg);
    -webkit-transform: skew(-16deg, 0deg);
    transform: skew(-16deg, 0deg);
}
.titelsectie::before {
    content: " ";
    background-color: #201547;
    position: absolute!important;
    width: 10%;
    height: 85%;
    left: -8%;
    top: 0;
    z-index: 999!important;
    transform-origin: bottom left;
    -ms-transform: skew(-16deg, 0deg);
    -webkit-transform: skew(-16deg, 0deg);
    transform: skew(-16deg, 0deg);
}
<div class="titelsectie">
  <div class="fusion-builder-row fusion-row ">
    <div class="fusion-layout-column fusion_builder_column fusion_builder_column_1_2 fusion-builder-column-1 fusion-one-half fusion-column-first 1_2" style="margin-top:0px;margin-bottom:20px;width:48%; margin-right: 4%;">
      <div class="fusion-column-wrapper" style="padding: 0px 0px 20px 0px;background-position:left top;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;" data-bg-url=""> 
    <!-- some content with text, buttons and titles--> 

      </div>
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 28 июня 2019

Решено!

Спасибо за ваши ответы.Я также заметил, что урезанный код работал на моей стороне.Поэтому код должен быть правильным.

Поэтому я решил использовать инструмент осмотра в краю.

Я строю свой сайт в WordPress с темой AVADA.Я узнал, что avada добавила немного CSS только для IE / Edge.на элементе before для полной ширины.И этот CSS переписывал все важные биты.(.fusion-fullwidth.fusion-ie-mode :: before)

Я добавил! Это важно для всех этих битов, и теперь все в порядке!(не могу поверить, что я провожу большую часть вчерашнего дня, пытаясь решить эту проблему ;-))

...