我使用了4种颜色来创建css渐变,就像这样。
background: linear-gradient(to right, #ffffff 0%,#ffffff 72%,#929292 72%,#929292 100%);
我在这里使用bootstrap。我的问题是我如何在我的文件中调用这种渐变?
如果它有渐变的2或3种颜色,那对我来说没问题。然后我可以像这样使用bootstrap mixin功能..
#gradient.vertical(#ffffff; #f9f9f9 );
#gradient.vertical-three-colors(#ffffff; #f9f9f9; 72%; #e7eaef);
但我不知道如何使用它超过3种颜色..
希望有人可以帮助我。谢谢。
答案 0 :(得分:1)
只需制作自己的四向渐变mixin并将其添加到bootstrap / less / mixins / grandients.less
如:
.horizontal-four-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 33%; @mid-color-2: #abcdef; @color-stop-2: 66%; @end-color: #c3325f) {
background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @mid-color-2 @color-stop-2, @end-color);
background-image: -o-linear-gradient(left, @start-color, @mid-color @color-stop, @mid-color-2 @color-stop-2,@end-color);
background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @mid-color-2 @color-stop-2, @end-color);
background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
}
并用
调用它#gradient.horizontal-four-colors(#ffffff; #f9f9f9; 33%; #bbb, 66%, #e7eaef);