Можно ли совместить цвет и изображение с градиентами? - PullRequest
Новая
       33

Можно ли совместить цвет и изображение с градиентами?

0 голосов
/ 12 июня 2018

Я хочу иметь разделенный фон с цветом на левой стороне и изображением на правой стороне, и оба должны быть одинаково большими (по 50% каждый).Так что я знаю, что могу создать такой стиль тела, чтобы он стал красным на 50% слева от тела и синим на правой стороне: 

background-image: linear-gradient(to right, red, red 50%, blue 50%, blue);

Я бы вместо этого хотел что-то вроде этого: 

background-image: linear-gradient(to right, red, red 50%, url('image.jpg') 50%, url('image.jpg'));

Возможно ли это, или я должен использовать другой подход?

Я знаю, что могу разделить его на два деления, заставить их занимать по 50% каждый и установить для них любой фон, который я хочу, но я хочу иметьпрозрачная навигационная панель, и она должна идти слева направо, так что проблема в наличии двух div.

Спасибо за помощь!

Ответы [ 2 ]

0 голосов
/ 12 июня 2018

Вы можете использовать оба вместе с запятыми, так как linear-gradient использует свойство background-image css, но использование фонового изображения и линейного градиента, как это, кажется трудным способом сделать эту работу.Если вы сделаете внутренний контейнер с абсолютным позиционированием в nav a шириной 100% и добавите в него два элемента div, то оба элемента div могут быть равны 50%, а затем вы можете соответственно стилизовать каждый элемент div.Убедитесь, что родительский элемент position: relative, поэтому вы можете установить z-index, чтобы внутренний контейнер находился под вашими элементами навигации.Ниже приведен пример того, как это может работать.Надеюсь, это поможет.

Пример 

nav {
  height: 240px;
  width: 100%;
  display: block;
  position: relative;
}
.inner-container {
   height: 100%;
   width: 100%;
   position: absolute;
   display: flex;
   opacity: 0.5;
   z-index: 0;
}
.inner-container > div {
   flex: 1 1 50%;
}
#blue-box {
    background: linear-gradient(#e66465, #9198e5);
}
#img-box {
    background: url(https://teamroboboogie.com/wp-content/uploads/2017/06/campo_logo_lrg.png) no-repeat;
    background-size: 100% 100%;
}

ul {
  margin: 0;
  padding: 0;
  display: block;
  z-index: 1;
  position: relative;
}
li {
  display: inline-block;
  width: 30%;
  background: rebeccapurple;
  color: white;
  padding: 20px;
  box-sizing: border-box;
  cursor: pointer;
}
li:nth-child(2) {
  margin: 0 5%;
}
<nav>
  <div class="inner-container">
    <div id="blue-box">

    </div>
    <div id="img-box">

    </div>
  </div>
  <ul>
    <li>This could be a button</li><!--
 --><li>This could be a button</li><!--
 --><li>This could be a button</li>
  </ul>
</nav>
0 голосов
/ 12 июня 2018

Вы можете сделать 

background: linear-gradient(90deg, red 50%, rgba(0, 0, 0, 0) 50%), url('image.jpg');
...