如何简化此div循环(How do I simplify this div loop)

如何简化这样的div设计？ Angular / Jquery解决方案很好。这是一个在电影之上的div过滤器。此外，是应该简化还是保留原样？

http://jsfiddle.net/yv5qe2gv/

How do I simplify a div design like this? Angular/Jquery solutions are fine. This is a div filter that goes on top of a movie. Also, should this be simplified or leave it as is?

http://jsfiddle.net/yv5qe2gv/

最满意答案

你可以使用这样的linear-gradient ：

.row { background-image: repeating-linear-gradient( 90deg, rgba(24,24,24,.6), rgba(24,24,24,.6) 15%, rgba(10,10,10,.6) 15%, rgba(10,10,10,.6) 30% ); }

并将您的html简化为row元素：

#filter {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh
}
.row {
  height: 20%;
  width: 100%;
  background-image: repeating-linear-gradient(90deg, rgba(24, 24, 24, .6), rgba(24, 24, 24, .6) 15%, rgba(10, 10, 10, .6) 15%, rgba(10, 10, 10, .6) 30%);
}
.row:nth-child(even) {
  background-image: repeating-linear-gradient(90deg, rgba(10, 10, 10, .6), rgba(10, 10, 10, .6) 15%, rgba(24, 24, 24, .6) 15%, rgba(24, 24, 24, .6) 30%);
} 
  <div id="filter">
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
</div> 
  
 
 
 _DemoFiddle  
 
 请注意，这将在chrome中用于crossbrowser支持检查CanIuse和CSSTricks  
 
 编辑  
 由于与Lea Verou的工作链接，您可以只使用一个容器。  
#filter {
    background: rgba(0,0,0,.3);
    background-image: linear-gradient(45deg, rgba(0,0,0,.3) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.3) 75%, rgba(0,0,0,.3)), linear-gradient(45deg, rgba(0,0,0,.3) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.3) 75%, rgba(0,0,0,.3));
    background-size:180px 180px;
    background-position:0 0, 90px 90px
}
 
 唯一的问题是你需要一个固定的正方形值。  
 _DemoFiddle 
You can use a linear-gradient like this: 
.row {
    background-image: repeating-linear-gradient(
      90deg,
      rgba(24,24,24,.6),
      rgba(24,24,24,.6) 15%,
      rgba(10,10,10,.6) 15%,
      rgba(10,10,10,.6) 30%
    );
}
 
And simplify your html to just the row elements: 
 
 
  
  #filter {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh
}
.row {
  height: 20%;
  width: 100%;
  background-image: repeating-linear-gradient(90deg, rgba(24, 24, 24, .6), rgba(24, 24, 24, .6) 15%, rgba(10, 10, 10, .6) 15%, rgba(10, 10, 10, .6) 30%);
}
.row:nth-child(even) {
  background-image: repeating-linear-gradient(90deg, rgba(10, 10, 10, .6), rgba(10, 10, 10, .6) 15%, rgba(24, 24, 24, .6) 15%, rgba(24, 24, 24, .6) 30%);
} 
  <div id="filter">
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
</div> 
  
 
 
_DemoFiddle 
 
Note this will work in chrome for crossbrowser support check CanIuse and CSSTricks 
 
Edit 
Thanks to this link with the work of Lea Verou you can simply to just one container. 
#filter {
    background: rgba(0,0,0,.3);
    background-image: linear-gradient(45deg, rgba(0,0,0,.3) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.3) 75%, rgba(0,0,0,.3)), linear-gradient(45deg, rgba(0,0,0,.3) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.3) 75%, rgba(0,0,0,.3));
    background-size:180px 180px;
    background-position:0 0, 90px 90px
}
 
The only issue is you need a fixed value for the squares. 
_DemoFiddle