Question

我有一张背景图片，我在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();">

Answer 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;
}

<div></div>

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

1 个答案: