我想有一个分裂的背景与一个颜色在左边和一个图像在右边,两者都应该是一样大(每个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的问题。
谢谢你的帮助!
发布于 2018-06-13 03:05:54
你可以做到
background: linear-gradient(90deg, red 50%, rgba(0, 0, 0, 0) 50%), url('image.jpg');
发布于 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>
https://stackoverflow.com/questions/50823902
复制相似问题