如何防止CSS背景中的切片图像相互坐在一起？

I have a background image I have sliced in Photoshop and set in a CSS class called".bd-image". I reference this class in the body element because I want it to be the background image for the whole page. I want each image to be 100% and not repeat. 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. I need proper coding to set the images.

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

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

1 个解决方案

#1

When multiple images are added as background to an element, CSS would by default place them all in the same starting point. So, they will overlap one another. The background-position property should be used to set each image at their correct place. The value should be set such that the current image is offset from the previous image in X and/or Y directions.

当多个图像作为背景添加到元素时,CSS默认将它们全部放在同一个起始点。所以,它们会相互重叠。应使用background-position属性将每个图像设置在正确的位置。应设置该值,使得当前图像在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. 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.

在您的情况下,由于所有图像的宽度必须为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;
}

<div></div>

#1

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

#1

相关文章