Question

我的网页上有一个水平带，这是一个名为horizontal-strip的div类，我将其细分为2个单独的类，分别叫做左水平和右水平，所以我可以列出新闻标题左侧是半部分，右侧是电子邮件注册表格。水平条纹div有一个背景图像，但是现在我添加了左水平和右水平类，图像没有显示。

.horizontal-strip {
    background: url("ColBackground.png") scroll center top repeat;
    margin: auto auto 10px;
    padding: 5px;
    width: 950px;

}

.horizontal-strip .left-horizontal {
    float: left;
    width: 450px;

}

 .horizontal-strip .right-horizontal {
    float: right;
    width: 450px;

}

这就是HTML代码的样子：

<div class="horizontal-strip">
    <div class="left-horizontal">
        <h1>Top Stories</h1>


        <ul class="news-listing">
        <li>list of links here... </li>
        </ul>

    </div>  <!-- Closes left-horizontal div -->

    <div class="right-horizontal">

        <h1>News Sign-Up</h1>
        <p>Enter your email address below to receive automatic updates when a new story is added.</p>

        <form action="">
            Email: <input name="email" type="text">
            <input name="submit" value="Submit" id="submit-button" type="submit">
        </form>

    </div>  <!-- Closes right-horizontal div -->
</div>  <!-- Closes horizontal-strip div-->

有谁能告诉我为什么背景图片没有显示出来？

Answer 1

你还没有清除漂浮物。将overflow: hidden添加到.horizontal-strip { }。这将清除浮动并使包装填充包含内容。

Answer 2

来自“Opacity of background, but not the text”

.yourClass {
/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0 opacity */
background-color: rgba(0, 0, 0, 0);
/* For IE 5.5 - 7 */ - /* first two numbers in #00000000 define opacity */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#00000000);
/* For IE 8 */ - /* first two numbers in #00000000 define opacity */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#00000000)";
}

我希望这适合你：）

Answer 3

如果你添加另一个风格清晰的div：在右水平div关闭之后和水平条纹div关闭之前，即在最后一行之前，它应该固定背景。

获取父div的背景图像以显示

3 个答案: