如何在每一面都有相同的背景图像？

Question

我在查看背景图片的选项时，我找不到一个选项 符合我所需设计的CSS background-repeat属性。我想要的设计是这样的：

问题：

我想要的设计就是这样的2张图像，它们与窗口的距离相似。 有没有办法在CSS中实现这一点，仍然将图像保留为背景而不是将它们放在<img>标签中？

以下是可用于将CSS应用于：

的代码段

.content{
height: 300px;
width: 1000px;
background-color: grey;
background-image: url("https://lh4.ggpht.com/mJDgTDUOtIyHcrb69WM0cpaxFwCNW6f0VQ2ExA7dMKpMDrZ0A6ta64OCX3H-NMdRd20=w300-rw")
}

<div class="content">
 </div>

Answer 1

您只需在背景中使用图像两次，并根据需要调整位置/大小（您将拥有多个背景）。您也可以将背景颜色放在同一个属性上。

注意订单。 第一个背景将位于顶部，因此背景颜色应该是最后一个，因此它不会覆盖图像。

.content {
  height: 300px;
  width: 1000px;
  background:  
  url("https://lh4.ggpht.com/mJDgTDUOtIyHcrb69WM0cpaxFwCNW6f0VQ2ExA7dMKpMDrZ0A6ta64OCX3H-NMdRd20=w300-rw") left/auto 100% no-repeat, 
  url("https://lh4.ggpht.com/mJDgTDUOtIyHcrb69WM0cpaxFwCNW6f0VQ2ExA7dMKpMDrZ0A6ta64OCX3H-NMdRd20=w300-rw") right/auto 100% no-repeat,
  grey;
}

<div class="content">
</div>

或者您可以单独保留background-color，但必须在多个背景之后定义它，否则它将被背景属性覆盖：

/* This is correct */
.content {
  height: 300px;
  width: 1000px;
  background:  
  url("https://lh4.ggpht.com/mJDgTDUOtIyHcrb69WM0cpaxFwCNW6f0VQ2ExA7dMKpMDrZ0A6ta64OCX3H-NMdRd20=w300-rw") left/auto 100% no-repeat, 
  url("https://lh4.ggpht.com/mJDgTDUOtIyHcrb69WM0cpaxFwCNW6f0VQ2ExA7dMKpMDrZ0A6ta64OCX3H-NMdRd20=w300-rw") right/auto 100% no-repeat;
  background-color:grey;
}
/* This is not correct as background-color will have no effect*/
.content-alt {
  height: 300px;
  width: 1000px;
  background-color:grey;
  background:  
  url("https://lh4.ggpht.com/mJDgTDUOtIyHcrb69WM0cpaxFwCNW6f0VQ2ExA7dMKpMDrZ0A6ta64OCX3H-NMdRd20=w300-rw") left/auto 100% no-repeat, 
  url("https://lh4.ggpht.com/mJDgTDUOtIyHcrb69WM0cpaxFwCNW6f0VQ2ExA7dMKpMDrZ0A6ta64OCX3H-NMdRd20=w300-rw") right/auto 100% no-repeat;

}

<div class="content"></div>
<div class="content-alt"></div>

更多详情：

您还可以考虑多种背景的另一种语法。上面我使用了速记，但你可以分开属性。如果您将拥有许多将共享相同值的图像（如您的大小和重复），这将非常有用。这也将删除background-color限制，例如，您可以轻松地将背景颜色应用于另一个类：

.content {
  height: 300px;
  width: 1000px;
  /* you can put back this on the top as there is no more background property used */
  background-color:grey;
  background-image:  
  url("https://lh4.ggpht.com/mJDgTDUOtIyHcrb69WM0cpaxFwCNW6f0VQ2ExA7dMKpMDrZ0A6ta64OCX3H-NMdRd20=w300-rw"), 
  url("https://lh4.ggpht.com/mJDgTDUOtIyHcrb69WM0cpaxFwCNW6f0VQ2ExA7dMKpMDrZ0A6ta64OCX3H-NMdRd20=w300-rw");
  background-size:auto 100%; /* Same for both no need to define twice */
  background-position:left,right; /* we respect the same order as background-image*/
  background-repeat:no-repeat; /* Same for both no need to define twice */

}

<div class="content">
</div>