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

Question

I have a background image I have sliced in Photoshop and set in a CSS class called".bd-image". 我有一个在Photoshop中切片的背景图像，并设置在一个名为“ .bd-image”的CSS类中。 I reference this class in the body element because I want it to be the background image for the whole page. 我在body元素中引用了该类，因为我希望它成为整个页面的背景图像。 I want each image to be 100% and not repeat. 我希望每个图像都是100％，而不要重复。 The problem is the images are on top of one another and not spreading out on the page. 问题是图像彼此重叠，而不在页面上散开。 I changed the width and height from the absolute value to 100%, but no success. 我将宽度和高度从绝对值更改为100％，但没有成功。 I need proper coding to set the images. 我需要正确的编码来设置图像。

Does anyone know how to layer sliced images so they go down the page in the correct position and do not overlap? 有谁知道如何对切片的图像进行分层，以使它们在正确的位置沿着页面向下并且不会重叠？ Or does anyone know of a sliced image background I can reference to get the correct coding? 还是有人知道我可以参考切片的图像背景以获得正确的编码？

  .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();">

Answer 1

When multiple images are added as background to an element, CSS would by default place them all in the same starting point. 当将多个图像作为背景添加到元素时，CSS会默认将它们全部放置在同一起点。 So, they will overlap one another. 因此，它们将彼此重叠。 The background-position property should be used to set each image at their correct place. 应该使用background-position属性将每个图像设置在正确的位置。 The value should be set such that the current image is offset from the previous image in X and/or Y directions. 该值应设置为使当前图像在X和/或Y方向上与前一个图像偏移。

In your case, since all images have to be 100% in width they can all start at X position = 0, only the Y position needs to be set. 在您的情况下，由于所有图像的宽度都必须为100％，因此它们都可以从X位置= 0开始，因此仅需要设置Y位置。 The Y position of second image would be height of first image, that of the 3rd image would be height of 1st + 2nd image and so on. 第二个图像的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; }

 <div></div>

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-06-03 05:09:45

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-06-03 05:09:45

解决方案1
2 已采纳 2016-06-03 05:09:45