Можно ли установить border-image и background с повторяющимся свойством линейного градиента? - PullRequest
Новая
       35

Можно ли установить border-image и background с повторяющимся свойством линейного градиента?

1 голос
/ 06 марта 2020

Я пытаюсь установить свойства border-image и background как с параметром repeating-linear-gradient, но с разными значениями для одного и того же элемента <div>. Я не знаю, как это сделать, потому что с моей попыткой кажется, что параметры градиента перекрываются, и также кажется, что страница принимает последние установленные значения.

Вот код и вывод, который я получил: 

body {
    margin: 0;
    background:
    linear-gradient(217deg, rgba(255,0,0, .8), rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, rgba(0,255,0, .8), rgba(0,255,0,0) 70.71%),
    linear-gradient(336deg, rgba(0,0,255, .8), rgba(0,0,255,0) 70.71%);
}

.under_banner {
    width: 100%;
    height: 20%;
    top: 80%;
    border-width: 10px 0 0 0;
    border-style: solid;
    border-image: repeating-linear-gradient(145deg, #ff0000, #ff9020 50%);
    background: repeating-linear-gradient(130deg, #f6d808, #ffc107 10%);
    text-align: center;
    line-height: 10px;
    position: fixed;
    z-index: 1;
}
<body>
  <div class="under_banner">
    <p>Hello StackOverflow Community!</p>
  </div>
</body>

Output

Как видите, .under_banner имеет свойство top-border, фактически repeating-linear-gradient не симметричен c с background. Я хотел бы получить разные градиенты для каждого свойства, используя один div, если это возможно.

Заранее спасибо!

1 Ответ

1 голос
/ 06 марта 2020

Вы можете использовать несколько фонов: 

body {
    background:
    linear-gradient(217deg, rgba(255,0,0, .8), rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, rgba(0,255,0, .8), rgba(0,255,0,0) 70.71%),
    linear-gradient(336deg, rgba(0,0,255, .8), rgba(0,0,255,0) 70.71%);
}

.under_banner {
    width: 100%;
    left:0;
    height: 20%;
    bottom:0;
    background: 
      repeating-linear-gradient(130deg, #f6d808, #ffc107 10%) bottom/100% calc(100% - 10px),
      repeating-linear-gradient(145deg, #ff0000, #ff9020 50%);
    background-repeat:no-repeat;
    text-align: center;
    line-height: 10px;
    position: fixed;
    z-index: 1;
}
<body>
  <div class="under_banner">
    <p>Hello StackOverflow Community!</p>
  </div>
</body>

Или измените свой код, как показано ниже, вы просто пропускаете свойство slice: 

body {
    background:
    linear-gradient(217deg, rgba(255,0,0, .8), rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, rgba(0,255,0, .8), rgba(0,255,0,0) 70.71%),
    linear-gradient(336deg, rgba(0,0,255, .8), rgba(0,0,255,0) 70.71%);
}

.under_banner {
    width: 100%;
    left:0;
    height: 20%;
    bottom:0;
    border-width: 10px 0 0 0;
    border-style: solid;
    border-image: repeating-linear-gradient(145deg, #ff0000, #ff9020 50%) 10; /* added the slice here */
    background: repeating-linear-gradient(130deg, #f6d808, #ffc107 10%);
    text-align: center;
    line-height: 10px;
    position: fixed;
    z-index: 1;
}
<body>
  <div class="under_banner">
    <p>Hello StackOverflow Community!</p>
  </div>
</body>

Для более подробной информации: border-image-slice для градиентного изображения границы

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...