Question

我有两个div，一个在整个屏幕上伸展，另一个在中心。

<div id="outer">
  <div id="inner">
  </div>
</div>

CSS看起来像这样：

#outer {
   /* This line is important */
  background: black url("https://placehold.it/1x50") repeat-x; 

  /* irrelevant */
  height: 50px;
  width: 100%;
}

#inner {
  width: 1000px;
  height: 50px;
  margin: 0 auto;
  background-color: #eee;  
}

我想要做的是设置外部div的背景，但仅限于内部div的右侧。目前，1px图像被设置为在整个外部div上重复，但我需要它只向右移动。

完成后，inner div左侧的背景为黑色，右侧为灰色（因为placehold.it图像为灰色）。

如有必要，我可以更改HTML。

Answer 1

您可以使用线性渐变背景，颜色突然变化为50％：

#outer {
    background: linear-gradient(to right, #000 0%, #000 50%, #ccc 50%, #ccc 100%);
    height: 50px;
    width: 100%;
 }

结果如下：http://codepen.io/anon/pen/JWjQzm

增加：

使用背景图像，您可以组合纯色背景和图像。但是你不能在x轴上重复图像，所以你必须有一个至少覆盖右侧背景宽度的图像：

 background: #000  url(http://placehold.it/200x50/fa0) right repeat-y;

http://codepen.io/anon/pen/jBOgya

评论后的另一个补充/版本：

你还没有说出是什么样的图像，但如果它只是一个重复的1x50像素图片，你可以通过添加背景尺寸将它拉伸到屏幕宽度的一半：50％100％ ; - 请参阅下面链接的codepen：

http://codepen.io/anon/pen/OpJKKO

Answer 2

在您的codepen上试用此代码

<强> HTML

<div id="outer">
 <div id="inner">
 </div>
</div>

<强> CSS

#outer {
 background: black; 
 height: 50px;
 width: 100%;
 position: relative;
}

#inner {
  width: 1000px;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  background-color: #eee;
 }

#inner:after{
   content: "";
  background: url(http://placehold.it/1x50/fa0) repeat-x;
  top: 0px;
  right:0px;
  height: 50px;
  width: calc(50% - 500px);
  position: absolute;
}

如何将外部div的背景图像仅设置在内部div的右侧？

2 个答案: