CSS背景图像仅在空白区域答案

【问题标题】：CSS background image only in empty areaCSS背景图像仅在空白区域
【发布时间】：2012-01-06 13:42:22
【问题描述】：

我在 main div 中有一个小 div box。主 div 使用背景图像。我想在box div 中添加一些文字和一张背景图片，让背景图片只出现在文字后面的空白区域。所以就像盒子里的文本有主 div 的背景图像，而盒子 div 内的其余空白区域有另一个背景图像。这是html：

        <div class="main">//width = x
           <div class="box"> //width = x
              <span class="text">Text, no bg. </span>  // width = y
              <!-- need bg here in x-y area.-->
            </div>
        </div>

希望这是有道理的。

编辑：请在此处查看我的 Jsfiddle 链接：http://jsfiddle.net/zr9Ks/ 我正在尝试的只是在框 div 内的 span 下具有与主 div 相同的背景，并将框 div bg 推到文本之后。

【问题讨论】：

为什么是-1？ @Elen 它的非常基本的例子，我已经提到 main 和 box div 具有相同的宽度，这就是所有 css。
粘贴CSS，即使它是基本的
你应该展示你已经尝试过的东西
有点不清楚。对我来说，听起来你需要另一个 div 在你的 span 之后有你需要的背景，然后 span 会有 main 的 bg 而另一个 img 会显得更低。这就是你想要的吗？
box 中的背景图片是否有固定高度？

标签： html css

【解决方案1】：

我现在更了解您所追求的效果。我能想到的唯一方法是使用表格使右侧单元格为 100% 宽度，左侧单元格不换行，检查以下 jsfiddle：

http://jsfiddle.net/LQydR/

【讨论】：

【解决方案2】：

如果您需要，背景可以向左移动。正如@Elen 所说，您的期望有点不清楚。无论如何，移动背景是这样的：

.main {
    width:300px;
    background-image:url('mainbg.png');
}


.text {
    width:100px;
    background:none;
}

.box {
    width:300px;
    background-repeat:no-repeat;
    background-position:100px 0;
    background-image:url('boxbg.png');
}

请记住，跨度不会服从宽度，并且会采用内部文本的宽度，除非您将其设置为 display:block。

【讨论】：

谢谢，想法是一样的，但唯一的问题是 .text 没有固定的宽度，所以我不能设置背景图片的位置。
这就是为什么你应该粘贴你的 CSS 并且可能是你所拥有的一个完整的例子。也许您只需要在带有背景图像的 .text 之后添加一个浮点数即可获得您想要的效果，但没有我们猜测的示例。
请看这个jsfiddle.net/zr9Ks；我不希望框 bg 出现在文本下方（它应该只出现在文本之后。
在这种情况下，您应该在容器内显示 span-text 和 span-bg inline 并将它们的宽度设置为 30%/70% 或其他...

【解决方案3】：

我想我明白你需要什么：

.box {
    width:300px;
    padding-bottom: [height of the img];
    background: url('img.png') repeat-y left bottom;
}

【讨论】：

【解决方案4】：

如果我正确理解了您的问题，您只需在 .main 和 .box 上声明不同的背景图像/颜色即可。

【讨论】：