Исправление непрозрачности CSS - создание прозрачной емкости для растяжения страницы (и скрытых частей) - PullRequest
Новая
       8

Исправление непрозрачности CSS - создание прозрачной емкости для растяжения страницы (и скрытых частей)

0 голосов
/ 07 марта 2012

Я использую исправление CSS, чтобы прозрачность не влияла на внутренние элементы, и я столкнулся с проблемой.Изображение будет растягиваться только до 100% видимой страницы.Моя страница довольно высокая, однако половина ее скрыта и доступна только при прокрутке вниз.Как только вы прокрутите вниз, контейнер с изображениями закончится, и я получу только сплошную заливку.Можно ли это исправить, например CSS или jQuery?

Пример: enter image description here

HTML: 

<body><!-- Bg Color -->
    <div class="bgImg"></div><!-- Bg Image Container -->
    <div data-role="page" class="type-home" data-theme="a">



    </div>
</body>

CSS: 

body { background-color: red; }

.bgImg {
    background-image: url(../images/patterns/pattern9.png);
    opacity: 0.8;
    filter: alpha(opacity=0.8;);
    -khtml-opacity: 0.8;
    -moz-opacity: 0.8;
    -webkit-opacity: 0.8;
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

1 Ответ

1 голос
/ 07 марта 2012

проще всего было бы поменять его на положение: исправлено; тогда ваш фон вообще не будет прокручиваться

Если вы хотите, чтобы ваш фон прокручивался, то вы можете использовать javascript (или библиотеку javascript), чтобы получить высоту содержимого и динамически установить высоту фона.

JQuery: 

$("div.bgImg").height($("div.type-home").height());
...