css - 如何为 CSS 列中的每一列应用备用背景色

Question

如何根据列数将替代背景颜色应用于多列布局。

在上面的链接中，如果您看到所有列的背景都是蓝色的，我想提供白色和蓝色的交替背景色

HTML

<div class="container" id="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquam commodo vestibulum. Duis in risus auctor, posuere elit a, interdum nunc. Vivamus nisl velit, vehicula ut ornare ac, mollis sit amet lectus. Praesent volutpat erat sem, id accumsan arcu tempor et. Quisque elementum leo sed elit volutpat, cursus dapibus lorem bibendum. Vivamus porta, elit sed facilisis tincidunt, enim diam suscipit metus, sit amet tincidunt ipsum augue id erat. Duis eget mi enim. Donec volutpat metus ut lacus iaculis cursus et eleifend orci. Vestibulum sollicitudin nibh sit amet laoreet dignissim. Pellentesque vulputate, leo eu commodo imperdiet, felis ante faucibus mi, vitae bibendum velit ipsum id arcu. Praesent a rhoncus quam, vel viverra elit. Nullam tellus velit, porta eu interdum quis, porttitor sed elit. Pellentesque egestas nisi odio, eget placerat nibh rhoncus id.</p>  
    <p>Vestibulum ante risus, placerat at egestas sit amet, interdum rhoncus leo. Donec libero nunc, aliquam aliquet massa non, fringilla consectetur est. Proin sodales vehicula ante pretium mollis. Proin laoreet vel dui a elementum. Pellentesque et ante odio. Cras commodo nisi sit amet mi pharetra, quis rhoncus tortor sodales. Etiam rhoncus orci nibh, id tincidunt nisi semper non. Quisque a imperdiet purus. Maecenas malesuada quis libero eu viverra. Proin eu diam accumsan, rutrum turpis eget, fermentum diam. Integer sem enim, hendrerit rhoncus suscipit sit amet, rutrum id lectus.</p>
    <p>Suspendisse potenti. In hac habitasse platea dictumst. Suspendisse potenti. Phasellus leo tortor, vestibulum vel odio sed, tincidunt dictum urna. Ut ullamcorper lobortis lacus, at tristique massa posuere vel. Proin aliquam quam tellus, elementum suscipit mauris elementum nec. Proin aliquet quam ligula, sed vulputate nisl sodales sed. Sed erat turpis, iaculis ac nulla eu, dapibus adipiscing elit. Fusce adipiscing nunc mi, ac tempus nunc interdum gravida.</p>
</div>

CSS

.container {
    background-color: blue

    color:#000;
    margin:20px auto;
    padding:20px;
    position:relative;
    width:800px;
    border-radius:5px;
    box-shadow:1px 1px 5px #111111;

    /* column specific styling */
    column-count: 3;
    column-gap: 3em;
    column-rule: 1px dashed black;
}

Answer 1

这是一个严重的 HACK，但只要您有一个固定宽度的容器，它就应该可以满足您的需要。

我没有时间摆弄宽度，但如果你花时间，理论上你“可以”使用具有硬边的 gradient 来获得所需的结果。如果您使用虚线 column-rule 来隐藏/混淆容器之间的模糊线，它也会有所帮助。

http://jsfiddle.net/r8G2X/2/

.container {
    background-image: -webkit-gradient(
        linear,
        right top,
        left top,
        color-stop(0.67, #324FA2),
        color-stop(0.66, #51C26F),
        color-stop(0.33, #7091EA),
        color-stop(0.34, #51C26F)
    );

    color:#000;
    margin:20px auto;
    padding:20px;
    position:relative;
    width:800px;
    box-shadow:1px 1px 5px #111111;

            border-radius:5px;
       -moz-border-radius:5px;
    -webkit-border-radius:5px;

            column-count: 3;
       -moz-column-count: 3;
    -webkit-column-count: 3;

            column-gap: 3em;
       -moz-column-gap: 3em;
    -webkit-column-gap: 3em;

            column-rule: 1px dashed black;
       -moz-column-rule: 1px dashed black;
    -webkit-column-rule: 1px dashed black;
}