文章/答案/技术大牛

发布

问4色自举梯度
EN

Stack Overflow用户

提问于 2014-07-08 08:58:18

回答 1查看 2.3K关注 0票数 3

我用了4种颜色来创建css渐变，就像这样。

background: linear-gradient(to right, #ffffff 0%,#ffffff 72%,#929292 72%,#929292 100%);

这里我用的是引导。我的问题是如何在我的较少的文件中调用这种梯度？

如果它在渐变中有2或3种颜色，那对我来说是可以的。然后我就可以像这样使用引导混合函数。

#gradient.vertical(#ffffff; #f9f9f9 );
#gradient.vertical-three-colors(#ffffff; #f9f9f9; 72%; #e7eaef);

但是我不知道怎么用三种以上的颜色。

希望有人能帮我。

谢谢。

twitter-bootstrap

linear-gradients

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-07-08 09:08:18

只需创建您自己的四种渐变混合，并将其添加到引导/less/ mixin /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);

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/24627657

复制

相似问题

问4色自举梯度
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问4色自举梯度EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问4色自举梯度
EN