CSS中的垂直重复水平渐变 [英] Vertically-repeating horizontal gradient in CSS

问题描述

我无法想出一个纯粹的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:

我可以轻松获得水平效果

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?

推荐答案

延伸自评论：

由于您已经在使用 linear-gradient ，建议使用

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

使用（美化）的SVG：

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>

您可以调整 height 和 viewBox 这里和 background-size 在CSS中以满足您的需要。

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

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

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

这篇关于CSS中的垂直重复水平渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！