本文介绍了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?
推荐答案
延伸自评论：
由于您已经在使用，建议使用属性至关重要，否则背景图片可能无法拉伸。
The preserveAspectRatio attribute here is crucial, otherwise the background image may not stretch.
这篇关于CSS中的垂直重复水平渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！