Question

我正在尝试修改我从此CSS3 Pattern Gallery获得的代码。我想要实现的修改是根据div大小调整背景图块的大小。这是一个延迟加载功能，我希望背景始终包含它所包含的div，无论div是多大（无论宽度是在px还是%中测量的）。 / p>

我希望网格的正方形被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链接：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的渐变背景图案填充宽度自动垂直重复

1 个答案: