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

Question

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

我想让网格的正方形填充 div 宽度的 5%，这很容易。这样一来，背景图案就永远不会被 div 的宽度切割，因为它总是在整个 div 中填充图案的平铺 5%。

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

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

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

Answer 1

如果 CSS 有模数计算，我们可以做类似的事情:
宽度: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 链接:https://jsfiddle.net/1mahjpxL/1/


您甚至可以使用重复图像，或者更好的是 data:image/base64。
这样您就不必托管它了:
背景: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>