Question

我正在尝试生成一个与图像下方图像具有相同效果的渐变示例：

这只是一栏。

这是我的信息：

ContainerWidth: 960px;    
GutterWidth:20px;         (GR + GL)
NumberOfColumns:16;       (C * 16)
ColumnWidth:40px          (C)

注意：以上信息是DYNAMIC，用户可以更改此信息，一旦窗口在ContainerWidth下面调整大小，它就会设置为100％，因此我需要动态百分比。< / EM>

我确实试过这个颜色停止并且成功了，但它似乎太过分了。

编辑我发布了颜色停止的答案，但是Majky发布的答案肯定是正确的方法！

Answer 1

试试这个CSS3条纹图案。它应该做你想要的。

这是链接：http://lea.verou.me/css3patterns/#vertical-stripes

所以您需要做的就是更改以下代码以满足您的需求。

background-color: gray;
background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.5) 50%);
background-size: 50px 50px;

它比为每列写css更好。

例如，此代码基于您的数据（左侧和右侧有边框）

UPDATE 现在没有边框，只有CSS！使用2个渐变，一个用于边框条纹，另一个用于重复条纹。删除百分比。现在它真的很神奇了！

background-color: #111111;
background-image: linear-gradient(90deg, transparent 40px, #444444 20px ),
linear-gradient(90deg, transparent 940px, #222222 10px); 
background-size: 60px, 950px;
background-position: 10px, 10px;

更新了jsFiddle preview

希望这有帮助！

Answer 2

对于那些正在考虑使用自定义属性从渐变创建网格的人来说，这就是我使用sass / scss实现这一目标的方法：

@mixin buildGridGradient($c1: #444, $c2: #111, $c3: #222, $gutter: $gutterWidth, $nc: $numberOfColumns, $c: $columnWidth) {
  $gr: ();
  $wgr: ();
  $halfGutter: $gutter / 2;
  $resetGutter: $halfGutter;
  $from:left;
  $to:right;

  @for $columns from 0 through $nc {

    @if $columns > 0 {
      $resetGutter: $gutter;
    }
    @if $columns != 16 {
      $gutterLeftStart :    strip-units(perc($resetGutter * $columns)) + strip-units(perc($c * $columns));
      $gutterLeftEnd :      $gutterLeftStart + strip-units(perc($halfGutter));
      $gridLeft :           $gutterLeftEnd;
      $gridRight :          $gridLeft + strip-units(perc($c));
      $gutterRightStart :   $gridRight;
      $gutterRightEnd :     $gutterRightStart + strip-units(perc($halfGutter));

      $gutterLeftStartWK : $gutterLeftStart / 100;
      $gutterLeftEndWK   : $gutterLeftEnd / 100;
      $gridLeftWK        : $gridLeft / 100;
      $gridRightWK       : $gridRight / 100;
      $gutterRightStartWK: $gutterRightStart / 100;
      $gutterRightEndWK  : $gutterRightEnd / 100;

      $wgr: join($wgr, unquote("color-stop(#{$gutterLeftStartWK}, green)"), comma);
      $wgr: join($wgr, unquote("color-stop(#{$gutterLeftEndWK}, green)"), comma);
      $wgr: join($wgr, unquote("color-stop(#{$gridLeftWK}, red)"), comma);
      $wgr: join($wgr, unquote("color-stop(#{$gridRightWK}, red)"), comma);
      $wgr: join($wgr, unquote("color-stop(#{$gutterRightStartWK}, green)"), comma);
      $wgr: join($wgr, unquote("color-stop(#{$gutterRightEndWK}, green)"), comma);

      $gr: join($gr, unquote("green #{$gutterLeftStart}%"), comma);
      $gr: join($gr, unquote("green #{$gutterLeftEnd}%"), comma);
      $gr: join($gr, unquote("red #{$gridLeft}%"), comma);
      $gr: join($gr, unquote("red #{$gridRight}%"), comma);
      $gr: join($gr, unquote("green #{$gutterRightStart}%"), comma);
      $gr: join($gr, unquote("green #{$gutterRightEnd}%"), comma);
    }
  }
  $prefixes: (-webkit-, -moz-, -ms-, -o-);
  background-image: -webkit-gradient(linear, #{$from} 50%, #{$to} 50%, #{$wgr});
  @each $prefix in $prefixes {
    background-image: #{$prefix}linear-gradient(#{$from}, #{$gr});
  }
}

上面的mixin非常出色，虽然jsfiddle确实支持sass，但似乎它已经过时，或者不接受某些参数，所以我在下面的演示中发布了结果。

DEMO： http://jsfiddle.net/shannonhochkins/DRuSk/

使用渐变css3重新创建网格

2 个答案: