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 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>

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

2 个答案: