html - 使用 CSS3 设置多个背景图像的样式

Question

我知道有类似的问题，但我找不到合适的解释。我正在尝试了解具有多个重复背景的最佳 CSS 实践。本质上，我希望能够重复背景图像以适应屏幕的整个高度和宽度，并在每个重复背景图像的内部居中放置另一个 div，但每个背景图像的内部居中 div 应该只重复一次。

所以在下面我设置了一个背景图像来填充整个视口(viewport)并重复。但是，我为使中心图像重复而尝试做的一切都没有奏效。我最终使内部图像 div 在整个视口(viewport)中重复，而不是每个背景图像只重复一次。

我知道我可以在其中添加一个带有 img 标签的 div，根据需要设置样式，然后将 div 复制并粘贴到 HTML 中，但这不是 DRY，我想避免这种情况。我也知道您可以使用 CSS3 声明多个背景，但到目前为止没有任何效果。我不确定这是否是解决这个问题的正确方法，但我发现 CSS 对于这种性质的事情来说真的很困惑。我不确定是否有完全不同和更好的方法来做到这一点，所以我非常感谢任何帮助，谢谢

<div id='bground'>
 <div id='center-image'></div>
</div>

<style>
#bground {
  height:100vh;
  width:100vw;
  background-image: url(./img);
  background-repeat: repeat;
}

#center-image {
???
}
<style>

Answer 1

图片

如果您打算重复两张图片，一张在另一张上方居中，您可以对居中的图片使用 SVG。遗憾的是，您需要为居中图像使用数据 URI。

基本上，您将使用 SVG 图像作为居中图像的容器。您需要使 SVG 的宽度和高度与底层图像的尺寸相匹配。然后，需要定位 SVG 中较小的图像，使其相对于底层图像居中。请注意 SVG 中图像元素的 x、y、宽度和高度属性。

下面的例子使用了多个背景图片。

这个问题的答案更详细地讨论了 SVG 方法:CSS, background-repeat distance

body {
  margin: 0;
}
#bground {
  height:100vh;
  width:100vw;
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22200%22%20height%3D%22300%22%3E%3Cimage%20x%3D%2280%22%20y%3D%22130%22%20width%3D%2240%22%20height%3D%2240%22%20xlink%3Ahref%3D%22data%3Aimage%2Fjpeg%3Bbase64%2C%2F9j%2F4AAQSkZJRgABAQAAAQABAAD%2F2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj%2F2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj%2FwgARCAAoACgDASIAAhEBAxEB%2F8QAGwAAAwEAAwEAAAAAAAAAAAAAAAQGAwECBQf%2FxAAXAQADAQAAAAAAAAAAAAAAAAABAgMA%2F9oADAMBAAIQAxAAAAG86acOV1s9MqB6A8n5WklJX%2Be1spUAXYuMNlgBjUw09AMf%2F8QAIRAAAgICAQQDAAAAAAAAAAAAAgMAAQQRBQYQEiETFBX%2F2gAIAQEAAQUClwpcZ77%2FAGkk%2BtHPCbqc3ksWJUW%2Bn8mwO2rnqc0L4T23fAibGWIQj1LbUyFoXkDmfFP0jn%2F%2FxAAZEQACAwEAAAAAAAAAAAAAAAAAAQMQESD%2F2gAIAQMBAT8BGOPecr%2F%2FxAAYEQEBAQEBAAAAAAAAAAAAAAAAARAREv%2FaAAgBAgEBPwFHpUzqXP%2FEACMQAAEDAwMFAQAAAAAAAAAAAAEAAiEDEBESMTIEE0FxkSD%2F2gAIAQEABj8C%2FZpNqDWPCg59XDKOZE4WxTqL4aZGVzb9sH9PqAAnSubvqfUe7LBGCthaV3GjfwiGDHq3%2F8QAHhAAAgICAwEBAAAAAAAAAAAAAAERITFBEFFhkXH%2F2gAIAQEAAT8haky4Yk6rhk9ldiBK0xsVPRDcN4kl5b%2BG6dVLEs%2FIN9V8Hk4zXQWCcOpK2NluSVmRnNR6PKc26JjoircsTUz%2F2gAMAwEAAgADAAAAEDOwo1gwYfv%2FxAAYEQEBAQEBAAAAAAAAAAAAAAABABEQYf%2FaAAgBAwEBPxC8yLXuss6dbL%2F%2FxAAYEQEAAwEAAAAAAAAAAAAAAAABABARMf%2FaAAgBAgEBPxCgDk3lNiiJX%2F%2FEACEQAQACAgIBBQEAAAAAAAAAAAEAESExQVFxEGGBobHR%2F9oACAEBAAE%2FELW0gqmyDDiYrR5lZuXo9KVbULukWV5B0pzUsrFUqlmyGZMLEtl8wBS6zwWtmuZz55VQ3LMSNlQbLcZilBff%2B0RlvhzNRXR3Q52y0I1bVzNQpLb5p6gGyHhB%2FZtwQwhRpbIkobZnuBFUklgL3Eiln3P%2F2Q%3D%3D%22%20%2F%3E%3C%2Fsvg%3E'), url('https://unsplash.it/200/300/?random');

/*
SVG image before URL encoding (required for IE/Edge)
data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="300"><image x="80" y="130" width="40" height="40" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wgARCAAoACgDASIAAhEBAxEB/8QAGwAAAwEAAwEAAAAAAAAAAAAAAAQGAwECBQf/xAAXAQADAQAAAAAAAAAAAAAAAAABAgMA/9oADAMBAAIQAxAAAAG86acOV1s9MqB6A8n5WklJX+e1spUAXYuMNlgBjUw09AMf/8QAIRAAAgICAQQDAAAAAAAAAAAAAgMAAQQRBQYQEiETFBX/2gAIAQEAAQUClwpcZ77/AGkk+tHPCbqc3ksWJUW+n8mwO2rnqc0L4T23fAibGWIQj1LbUyFoXkDmfFP0jn//xAAZEQACAwEAAAAAAAAAAAAAAAAAAQMQESD/2gAIAQMBAT8BGOPecr//xAAYEQEBAQEBAAAAAAAAAAAAAAAAARAREv/aAAgBAgEBPwFHpUzqXP/EACMQAAEDAwMFAQAAAAAAAAAAAAEAAiEDEBESMTIEE0FxkSD/2gAIAQEABj8C/ZpNqDWPCg59XDKOZE4WxTqL4aZGVzb9sH9PqAAnSubvqfUe7LBGCthaV3GjfwiGDHq3/8QAHhAAAgICAwEBAAAAAAAAAAAAAAERITFBEFFhkXH/2gAIAQEAAT8haky4Yk6rhk9ldiBK0xsVPRDcN4kl5b+G6dVLEs/IN9V8Hk4zXQWCcOpK2NluSVmRnNR6PKc26JjoircsTUz/2gAMAwEAAgADAAAAEDOwo1gwYfv/xAAYEQEBAQEBAAAAAAAAAAAAAAABABEQYf/aAAgBAwEBPxC8yLXuss6dbL//xAAYEQEAAwEAAAAAAAAAAAAAAAABABARMf/aAAgBAgEBPxCgDk3lNiiJX//EACEQAQACAgIBBQEAAAAAAAAAAAEAESExQVFxEGGBobHR/9oACAEBAAE/ELW0gqmyDDiYrR5lZuXo9KVbULukWV5B0pzUsrFUqlmyGZMLEtl8wBS6zwWtmuZz55VQ3LMSNlQbLcZilBff+0RlvhzNRXR3Q52y0I1bVzNQpLb5p6gGyHhB/ZtwQwhRpbIkobZnuBFUklgL3Eiln3P/2Q==" /></svg>
*/
}

<div id="bground">
</div>

任意内容

如果您的意图是让您的内部 div 包含任意内容，那么您必须使用服务器端解决方案或客户端脚本。

这是一个使用 html2canvas 将您的 div 转换为图像的解决方案。然后将图像插入到 SVG 中，如上例所示。

var repeats = document.getElementsByClassName('background-repeat-centered');

for (var i = 0, max = repeats.length; i < max; i++) {
  var repeat = repeats[i],
      measureImage = new Image(),
      parentImage = repeat.parentElement,
      parentImageStyle = parentImage.currentStyle || window.getComputedStyle(parentImage, false),
      parentImageSrc = parentImageStyle.backgroundImage;

  measureImage.src = parentImageSrc.replace(/url\((['"])?(.*?)\1\)/gi, '$2').split(',')[0];
  
  measureImage.addEventListener('load', function () {
    var parentWidth = measureImage.width,
        parentHeight = measureImage.height;

    html2canvas(repeat, {
      onrendered: function(canvas) {
        var repeatWidth = canvas.width,
            repeatHeight = canvas.height,
            x = (parentWidth - repeatWidth) / 2,
            y = (parentHeight - repeatHeight) / 2;

        repeat.parentElement.style.backgroundImage = 'url(\'data:image/svg+xml,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="' + parentWidth + '" height="' + parentHeight + '"><image x="' + x + '" y="' + y + '" width="' + repeatWidth + '" height="' + repeatHeight + '" xlink:href="' + canvas.toDataURL() + '" /></svg>') + '\'), ' + parentImageSrc;
      }
    });

  }, false)
}

.background-repeat-centered {
  visibility: hidden;
}

body {
  margin: 0;
}
#bground {
  height: 100vh;
  width: 100vw;
  background-image: url('http://lorempixel.com/200/300/');
}
#sample {
  background: Purple;
  color: White;
  display: inline-block;
  font-family: sans-serif;
  font-weight: bold;
  padding: 10px;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

<div id="bground">
  <div class="background-repeat-centered" id="sample">
     Repeat after me!
  </div>
</div>