具有不同颜色行的背景 - 仅限 CSS [重复]

Posted 2023-03-05

【中文标题】具有不同颜色行的背景 - 仅限 CSS [重复]

【英文标题】：Background with different colored rows - css only [duplicate]

【发布时间】：2016-07-27 08:02:58

【问题描述】：

是否可以使用不同颜色的行创建背景？

这里有一些伪代码来说明它：

body 
    row-1 
        height: 250px;
        background-color: red;
    
    row-2 
        height: 250px;
        background-color: yellow;
    
    .
    .
    .
    row-n 
        height: 250px;
        background-color: green;
    

是否可以仅在 css 中做到这一点？

【问题讨论】：

“元素”:nth-child(odd)background:red

【参考方案1】：

您可以使用渐变来实现这一点。您可以使用在线 css 渐变生成器。这里是an example。

编辑：我想我误解了你的问题。您是否只是在问如何为身体中的不同 div 赋予不同的颜色？要么给它们所有独特的类，这样你就可以独立地设置它们的样式，或者使用:nth-child(x) 将x 替换为你想要设置样式的 div 编号（例如，如果你想要设置第二个 div 的样式，请使用 :nth-child(2)

【讨论】：

嗯，不知道渐变是不是合适的工具。但是谢谢我会喜欢它，不，没有html，如果可能的话，只有css。 :)