如何防止 CSS 背景中的切片图像彼此重叠？答案

【问题标题】：How do I prevent sliced images in the CSS background from sitting on each other?如何防止 CSS 背景中的切片图像彼此重叠？
【发布时间】：2016-06-03 13:09:45
【问题描述】：

我有一个背景图像，我在 Photoshop 中切片并设置在一个名为“.bd-image”的 CSS 类中。我在 body 元素中引用了这个类，因为我希望它成为整个页面的背景图像。我希望每个图像都是 100% 并且不重复。问题是图像彼此重叠，并没有在页面上展开。我将宽度和高度从绝对值更改为 100%，但没有成功。我需要正确的编码来设置图像。

有谁知道如何对切片图像进行分层，以便它们在页面的正确位置向下移动并且不重叠？或者有谁知道我可以参考的切片图像背景以获得正确的编码？

  .bd-image{

  background: 
  url(images/orange-dark_01.jpg) 100% 46px  no-repeat,  
  url(images/orange-dark_02.jpg)  100% 60px no-repeat,   
  .........
  url(images/orange-dark_24.jpg) 100% 46px no-repeat;

 }

</style>


</head>

<body class="bd-image" onload="StartTimers();" onmousemove="ResetTimers();">

【问题讨论】：

我不知道您可以将多个urls 分配给background
我也没有找到这些...developer.mozilla.org/en-US/docs/Web/CSS/…css-tricks.com/stacking-order-of-multiple-backgrounds
你试过给他们background-position吗？
刚刚看到您的代码，看起来您正在设置background-position 而不是background-size（100% 46px 部分），并且由于位置几乎相同，它们是重叠的。我也对这种说法感到困惑 - 我希望每张图片都是 100%。如果它们必须是 100%，您将如何获得切片/平铺外观？我误解了你的问题吗？
抱歉，我希望宽度为 100%，因为我希望它们随着屏幕分辨率的变化而改变大小。职位建议似乎很有希望，我仍在努力，但很有帮助

标签： javascript jquery html css image

【解决方案1】：

当多个图像作为背景添加到一个元素时，CSS 默认会将它们全部放在同一个起点。因此，它们将彼此重叠。 background-position 属性应该用于将每个图像设置在正确的位置。该值应设置为使当前图像在 X 和/或 Y 方向上与前一个图像有偏移。

在您的情况下，由于所有图像的宽度都必须为 100%，因此它们都可以从 X 位置 = 0 开始，因此只需要设置 Y 位置。第二张图片的Y位置是第一张图片的高度，第三张图片的Y位置是第一张图片的高度+第二张图片，依此类推。

div {
  /* as short-hand property */
  background: url(http://lorempixel.com/400/100/nature/1) 0px 0px / 100% 46px no-repeat, 
              url(http://lorempixel.com/400/100/nature/2) 0px 46px / 100% 60px no-repeat, 
              url(http://lorempixel.com/500/100/nature/3) 0px 106px / 100% 46px no-repeat;
  
  /* or as long-hand properties 
  background-image: url(http://lorempixel.com/100/100/nature/1), url(http://lorempixel.com/100/100/nature/2), url(http://lorempixel.com/100/100/nature/3);
  background-repeat: no-repeat;
  background-size: 100% 46px, 100% 60px, 100% 46px;
  background-position: 0px 0px, 0px 46px, 0px 106px;*/
  
  height: 152px;
  width: 200px;
}

/* just for demo - hover to see responsiveness */

div {
  transition: all 1s;
}
div:hover {
  width: 400px;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：