Question

我需要使用两个以上的div来做类似这个例子的事情。例如，一个div将是灰色div而另一个是绿色div。

是否可以在不指定百分比宽度的情况下执行泛型？

#test {
    height: 50px;
    background: linear-gradient(to right, grey 0%,grey 50%, green 50%,green 100%);
    text-align:center;
    vertical-align: middle;
}

<div id="test">
   Hello World!
</div>

Answer 1

是的，你可以“作弊”并达到你想要的效果，而不必为每个div指定一个全新的渐变，方法是将单个颜色渐变与backgroud-color组合，然后设置渐变的宽度与background-size。您还需要将background-repeat属性设置为no-repeat，以防止渐变填充元素。

这是一个简单的例子：

div{
    background:green linear-gradient(0deg,grey,grey) no-repeat;
    height:50px;
    margin:0 0 10px;
}
#quarter{
  background-size:25% 100%;
}
#third{
  background-size:33.333% 100%;
}
#half{
  background-size:50% 100%;
}

<div id="quarter"></div>
<div id="third"></div>
<div id="half"></div>

div的线性渐变

1 个答案: