css - CSS中垂直重复的水平渐变

Question

我很难想出一个纯 CSS 机制来实现特定的背景模式。

我正在寻找的是一个水平渐变，它也垂直重复，每个实例之间有一个间隙。例子：

_{（来源：howsfamily.net）}

我可以很容易地获得水平效果

background: linear-gradient(to left, white, red, white); background-size: 100% 50px; background-repeat: no-repeat; }

我可以得到垂直效果（没有水平渐变）

background: linear-gradient(to bottom, red 0px, red 50px, transparent 50px, transparent 100%); background-size: 100% 150px; background-repeat: repeat-y;

有谁知道如何将两者结合起来？

Answer 1

从评论扩展：

既然您已经准备好了linear-gradient，我建议您使用SVG以获得更多自由和更好的兼容性。

示例：http ://dabblet.com/gist/6632969

使用的 SVG（美化）：

<?xml version="1.0"?>
<svg width="10" height="100" viewBox="0 0 10 100" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="l">
            <stop offset="0%" stop-color="white" />
            <stop offset="50%" stop-color="red" />
            <stop offset="100%" stop-color="white" />
        </linearGradient>
    </defs>
    <rect x="0" y="0" width="10" height="50" fill="url(#l)" />
</svg>

您可以在此处和CSS 中调整heightand以满足您的需要。viewBoxbackground-size

这里的preserveAspectRatio属性很关键，否则背景图片可能无法拉伸。