CSS背景相同的图像到每一侧

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独立,但你必须在多个背景之后定义它,否则它将被background属性覆盖:

/* 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>