Question

我无法想出一个纯CSS机制来获得特定的背景模式。

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

Bidirectional Repeat Gradient http://howsfamily.net/bidirectional-repeating-gradient.png

我可以轻松获得水平效果

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>

您可以在此处调整height和viewBox以及CSS中的background-size以满足您的需求。

此处preserveAspectRatio属性至关重要，否则背景图片可能无法拉伸。

在CSS中垂直重复水平渐变

1 个答案: