Полосы на фоне: некоторые полосы должны быть прозрачными - PullRequest
1 голос
/ 09 мая 2020

Мне нужно воспроизвести это:

enter image description here

База в этом другом вопросе , я изменил этот код, но мои результаты плохие:

enter image description here

.expandiendo_la_palabra_stripes {
  height: 200px;
  width: 200px;
  background-image: linear-gradient(-45deg, white 25%, transparent 25%, transparent 50%, white 50%, rgb(14, 204, 93) 75%, transparent 75%, #fff);
  background-size: 10px 10px;
}

HTML:

<div class="row">
  <div class="col-md-4 monserrat">
    <span class="size40">ELIM
    ONLINE</span>
  </div>
  <div class="col-md-8 expandiendo_la_palabra_stripes">
    <div class="expandiendo_la_palabra align-middle" style="padding-left: 15%; margin-top: 12%;" >
    <span class="text-white" style="padding-top: 12%; position: relative; top: 0.35em;"> EXPANDIENDO LA PALABRA DE DIOS A TODO EL MUNDO.</span>
  </div>
  </div>
</div>

1 Ответ

3 голосов
/ 09 мая 2020

Вам понадобится другой градиент для имитации этого случайного фона:

.box {
  height:100px;
  border:1px solid;
  background:
    repeating-linear-gradient(-45deg,transparent 0 100px,green 100px 102px) 0 0,
    repeating-linear-gradient(-45deg,transparent 0 140px,green 140px 142px) 0 0/100% 80%,
    repeating-linear-gradient(-45deg,transparent 0 120px,green 120px 122px) 40px 10%/100% 50%;
  background-repeat:no-repeat;
}
<div class="box"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...