可以使用渐变将颜色和图像组合在一起吗？
可以使用渐变将颜色和图像组合在一起吗？
提问于 2018-06-13 02:48:29
我想有一个分裂的背景与一个颜色在左边和一个图像在右边，两者都应该是一样大(每个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的问题。
谢谢你的帮助！
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-13 03:05:54
你可以做到
background: linear-gradient(90deg, red 50%, rgba(0, 0, 0, 0) 50%), url('image.jpg');Stack Overflow用户
发布于 2018-06-13 03:40:17
当linear-gradient使用background-image css属性时，您可以将两者与逗号一起使用，但像这样使用背景图像和线性渐变似乎很难做到这一点。如果你在nav a中创建一个绝对定位的内容器，宽度为100%，并在里面添加两个div，这两个div都可以是50%，然后你可以相应地设计每个div的样式。确保父元素是position: relative，这样就可以设置z-index，使内部容器位于您的nav元素下面。下面是它如何工作的示例。希望这能有所帮助。
示例
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50823902
复制相关文章
相似问题