Vertically-repeating horizontal gradient in CSS

问题

I'm having trouble coming up with a pure CSS mechanism to get a particular background pattern happening.

What I'm looking for is a horizontal gradient that is also repeated vertically, with a gap between each instance. Example:

_{(source: howsfamily.net)}

I can get the horizontal effect easily enough

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

I can get the vertical effect (without the horizontal gradient)

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

Does anyone know how to combine the two?

回答1:

Extending from comment:

Since you're already going for linear-gradient, I would suggest using an SVG for more freedom and better compatibility.

Example: http://dabblet.com/gist/6632969

The SVG that is used (beautified):

<?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>

You can tweak the height and viewBox here and background-size in CSS to fit your need.

The preserveAspectRatio attribute here is crucial, otherwise the background image may not stretch.

来源：https://stackoverflow.com/questions/18908211/vertically-repeating-horizontal-gradient-in-css

标签

css

gradient