0

我想创建一个背景图像。具有以下功能的梯度混合：

  • 无限量（尚未完成，但有点工作）
  • 调整供应商前缀（部分有效）

我尝试了lesshat，但遗憾的是它不符合这些要求，因为它没有正确调整渐变方向。所以我最终使用了一堆 .replace 东西，这些东西并不完美，而且还没有适应程度值。

我无法弄清楚度数背后的数学原理，因为值不同，而 45deg (w3c) 保持 45deg (vendor)，135deg (w3c) 是 -45deg (vendor)。

有没有更好的解决方案？

// Vendor Prefixes
// ==========================================================================

  @w3c:     true;   // valid w3c syntax

  @webkit:  true;   // Google Chrome, Safari, iOS
  @opera:   true;   // Opera
  @moz:     true;   // Mozilla Firefox
  @ms:      true;   // Internet Explorer

.background-image (...) {
  .result (@arguments, @vendor) when (@vendor = true) {
    background-image: @arguments;
  }

  @background-image-webkit: ~`'@{arguments}'.replace('linear-gradient','-webkit-linear-gradient').replace('to top right','45deg').replace('to top left','135deg').replace('to bottom right','-45deg').replace('to bottom left','-135deg').replace('to top','bottom').replace('to right','left').replace('to bottom','top').replace('to left','right')`;

  @background-image-moz: ~`'@{arguments}'.replace('linear-gradient','-moz-linear-gradient').replace('to top right','45deg').replace('to top left','135deg').replace('to bottom right','-45deg').replace('to bottom left','-135deg').replace('to top','bottom').replace('to right','left').replace('to bottom','top').replace('to left','right')`;

  @background-image-ms: ~`'@{arguments}'.replace('linear-gradient','-ms-linear-gradient').replace('to top right','45deg').replace('to top left','135deg').replace('to bottom right','-45deg').replace('to bottom left','-135deg').replace('to top','bottom').replace('to right','left').replace('to bottom','top').replace('to left','right')`;

  @background-image-opera: ~`'@{arguments}'.replace('linear-gradient','-o-linear-gradient').replace('to top right','45deg').replace('to top left','135deg').replace('to bottom right','-45deg').replace('to bottom left','-135deg').replace('to top','bottom').replace('to right','left').replace('to bottom','top').replace('to left','right')`;

  @background-image-w3c: @arguments;

  .result (@background-image-webkit, @webkit);
  .result (@background-image-moz, @moz);
  .result (@background-image-ms, @ms);
  .result (@background-image-opera, @opera);

  .result (@background-image-w3c, @w3c);
}

@type: linear-gradient;
@dir:  ~'to bottom';
@start: steelblue;
@stop: crimson;
@type2: linear-gradient;
@dir2:  ~'to bottom';
@start2: blue;
@stop2: red;

single {
  .background-image (~`'@{type}(@{dir},@{start},@{stop})'`);
}

multiple {
  .background-image (~`'@{type}(@{dir},@{start},@{stop}),@{type2}(@{dir2},@{start2},@{stop2})'`);
}


/* Linear

.replace('to top right','45deg').replace('to top left','135deg').replace('to bottom right','-45deg').replace('to bottom left','-135deg').replace('to top','bottom').replace('to right','left').replace('to bottom','top').replace('to left','right')

*/

/* Radial

.replace('radial-gradient','-webkit-radial-gradient').replace('ellipse at center','center, ellipse cover')

*/
4

1 回答 1

0

我相信您所问的本质是如何将您的供应商价值（基于零垂直向上）转换为 w3c 值（基于零水平向右）。

相差90度。假设您的供应商值为-45degor 315deg（等价物），则以下等式求解 w3c 值：

90 - (vendor value) = equivalent w3c value

所以使用我们的例子：

90 - (-45) = 135
90 - (315) = -225

135和-225是 w3c 标准中学位定位的等价物。

如果您需要以其他方式转换，它仍然是相同的等式，只是将 w3c 值放在供应商值所在的位置。

90 - (135) = -45
90 - (-225) = 315
于 2013-06-13T14:03:58.917 回答