Получение фонового изображения родительского div для показа через - PullRequest
Новая
       1

Получение фонового изображения родительского div для показа через

0 голосов
/ 13 июля 2011

У меня есть горизонтальная полоса на моей веб-странице, которая является классом 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-->

Может кто-нибудь сказать мне, почему фоновое изображение не просвечивает?

Ответы [ 3 ]

2 голосов
/ 13 июля 2011

Вы не очистили поплавок.Добавьте overflow: hidden к вашему .horizontal-strip { }.Это очистит поплавок и наполнит упаковку содержимым.

0 голосов
/ 13 июля 2011

Если вы добавите еще один div со стилем clear: и после закрытия правого горизонтального div, и перед закрытием горизонтальной полосы, т. Е. Перед последней строкой, он должен исправить фон.

0 голосов
/ 13 июля 2011

Из " Непрозрачность фона, но не текста " 

.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)";
}

Я надеюсь, что это работает для вас:)

...