是否可以将颜色和图像与渐变结合起来？

Question

我想要一个分割背景，左边是颜色，右边是图像，两者应该同样大（各占 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'));

这可能吗，还是我应该采取其他方法？

我知道我可以将它分成两个 div，让它们各占 50%，并在它们上设置我想要的任何背景，但我想要一个透明的导航栏，它应该从左边开始向右，所以这就是有两个 div 的问题。

感谢您的帮助！

Answer 1

你可以做到

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

Answer 2

您可以将两者与逗号一起使用，因为 linear-gradient 使用 background-image css 属性，但是像这样使用背景图像和线性渐变似乎很难使这项工作的方式。如果您在 nav 中创建一个宽度为 100% 的绝对定位内部容器，并在其中添加两个 div，那么这些 div 都可以是 50%，然后您可以相应地设置每个样式。确保父元素是 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>

是否可以将颜色和图像与渐变结合起来？

Is it possible to combine a color and a image with gradients?

html

css

background

background-image