要实现背景中有两种水平颜色,并且一种比另一种宽的效果,可以使用CSS的线性渐变(linear-gradient)属性。以下是一个示例代码:
HTML:
CSS:
.background {
width: 100%;
height: 200px;
background: linear-gradient(to right, #ff0000 30%, #00ff00 70%);
}
在上面的示例中,我们使用了线性渐变属性(linear-gradient)来创建背景。to right
表示渐变方向从左到右,#ff0000
表示第一种颜色(红色),#00ff00
表示第二种颜色(绿色)。
使用百分比来定义渐变的位置,30%
和70%
表示第一种颜色和第二种颜色的宽度比例。在这个示例中,红色占据了整个宽度的30%,绿色占据了整个宽度的70%。
你可以根据自己的需求调整渐变的颜色和宽度比例。