Question

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

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

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

我无法弄清楚度数背后的数学，因为值不同，而45deg（w3c）保持45deg（供应商），135deg（w3c）是-45deg（供应商）。

有没有更好的解决方案？

// 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')

*/

Answer 1

我相信您要问的是如何将供应商价值（which is based off zero being vertical up）转换为w3c值（which is based off zero being horizontal right）。

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

90 - (vendor value) = equivalent w3c value

所以使用我们的例子：

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

135和-225等同于w3c标准中的学位定位。

如果您需要转换另一种方式，它仍然是相同的等式，只有w3c值放在供应商值的位置。

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

{LESS]具有供应商前缀的多个渐变

1 个答案: