使渐变背景图案填充宽度为 div 并自动垂直重复

Question

我正在尝试修改从 CSS3 Pattern Gallery 中获得的代码。我试图实现的修改是根据 div 大小调整背景图块的大小。这是一个延迟加载功能，我希望背景始终包含它所包含的 div，无论 div 的大小是多少（无论宽度是否以 px 或%).

我想用 div 宽度的 5% 填充网格的正方形，这很容易。这样，背景图案将永远不会被 div 的宽度切割，因为它总是在 div.

中填充图案的 5%

但我还希望正方形的高度与瓷砖的宽度具有相同的测量值，以使其成为方形图案。只要瓷砖不是水平切割的，我就可以垂直切割瓷砖。这就是我遇到的麻烦。现在，我尝试将 auto 置于 background-size 的高度。但这显然行不通。

有人知道如何解决这个问题吗？也许可以通过 SASS 个变量来实现？

我现在所处阶段的JSFiddle： https://jsfiddle.net/1mahjpxL/

Answer 1

如果 CSS 有模数计算，我们可以这样做：
width: calc(100% - (100% mod 20));
但是由于 CSS 中没有模数（虽然旧的 IE 有一段时间了），我们必须使用 jquery/javascript。
只有这样才能调整 div 的大小由某个因素，比如 20px.

这可能不是实现这一目标的最佳方式，但它确实有效。

$(document).ready(function() {
  $('#background').width(function(i, w) {
    return Math.floor(w / 20) * 20;
  });
  $(window).resize(function() {
    var parentwidth = $('#background').parent().width();
    $('#background').width(function(i, w) {
      return Math.floor(parentwidth / 20) * 20;
    });
  });
});

#container {
  width: 80%;
}
#background {
  margin: auto; /* to center it */
  width: 100%; /* in case the user has javascript disabled */
  height: 295px;
  border-top: 1px solid blue;
  border-left: 1px solid blue;
  background-color: white;
  background-position: -1px -1px;
  background-size: 20px 20px;
  background-image: linear-gradient(blue 1px, transparent 1px), linear-gradient(90deg, blue 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, .3) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .3) 1px, transparent 1px);
  -pie-background: linear-gradient(blue 1px, transparent 1px) -2px -2px / 100px, linear-gradient(90deg, white 1px, transparent 1px) -2px -2px / 100px, linear-gradient(rgba(255, 255, 255, .3) 1px, transparent 1px) -1px -1px / 20px, linear-gradient(90deg, rgba(255, 255, 255, .3) 1px, transparent 1px) -1px -1px / 20px, white;
  behavior: url(/pie/PIE.htc);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="background">
  </div>
</div>

jsfiddle link：https://jsfiddle.net/1mahjpxL/1/

您甚至可以使用重复图像，或者更好的数据：image/base64.
这样您就不必托管它了：
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEX///8AAP94wDzzAAAAEUlEQVQI12NgYBCgGv7//wMANusEHxczBm0AAAAASUVORK5CYII=);
jsfiddle 上的演示：https://jsfiddle.net/1mahjpxL/2/

或者使用模数 w - w % 20，如果你喜欢那样的话......：
https://jsfiddle.net/1mahjpxL/3/

/*$(document).ready(function() {*/
  $('#background').width(function(i, w) {
    return (w - w % 20);
  });
  $(window).resize(function() {
    var parentwidth = $('#background').parent().width();
    $('#background').width(function(i, w) {
      return (parentwidth - parentwidth % 20);
    });
  });
/*});*/

#container {
  width: 80%;
}
#background {
  margin: auto; /* to center it */
  width: 100%; /* in case the user has javascript disabled */
  height: 295px;
  border-top: 1px solid blue;
  border-left: 1px solid blue;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEX///8AAP94wDzzAAAAEUlEQVQI12NgYBCgGv7//wMANusEHxczBm0AAAAASUVORK5CYII=);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="background">
  </div>
</div>

使渐变背景图案填充宽度为 div 并自动垂直重复

Make gradient background pattern fill width of div and repeat vertically automatically

html

css

gradient

background