Сочетание повторяющегося фона и прозрачного линейного градиента несовместимо с поплавками?

Это должно быть совместимо со всеми современными браузерами и IE7 и IE8.

Я пытаюсь создать повторяющееся фоновое изображение для страницы с линейным затуханием, которое делает нижнюю часть темнее. http://i.imgur.com/rrzyw.jpg

Вот мой пример кода: http://jsfiddle.net/hxk2d/2/

Как видите, в приведенном выше примере у меня есть два плавающих div. Линейные градиенты тела по какой-то причине не отображаются. Я понял, что это было из-за того, что левый div был плавающим.

Как только я удалю поплавок для левого div, вы начнете видеть градиент, но он появится только внутри контейнера.

Очевидно, я бы предпочел, чтобы это работало, есть ли плавающий div или нет. Моими тестовыми браузерами были Chrome и Firefox, оба из которых выполняли одно и то же поведение.

Что мне не хватает?


person micah    schedule 02.01.2012    source источник


Ответы (1)


Пожалуйста, посмотрите на мой пример, я не уверен на 100%, но я думаю, что у родительского div ваших двух float не было вычислений высоты в результате двух плавающих div, родительский тег этого div - это тело, которое не У меня нет высоты, потому что внутри ничего нет, в качестве быстрого исправления я добавил класс clearfix к родительскому элементу плавающего div

Вот пример ссылки: http://jsfiddle.net/sHXf2/

Я изменил ваши градиенты, чтобы сделать их более заметными. Надеюсь, это помогло.

person rroche    schedule 02.01.2012
comment
Хорошо, спасибо! Из этой проблемы, которую я показал, есть две идеи: 1. html и body могут выполнять либо повторение bg, либо линейный градиент, но по какой-то причине их нельзя легко объединить и 2. почему плавающий div вызывает проблему с рендерингом линейного градиент. Хакер clearfix на данный момент может быть достойным временным решением. Не думал об этом. - person micah; 02.01.2012
comment
Я думаю, что градиент должен знать высоту элемента, чтобы он мог добавлять свои остановки цвета, высота тела зависит от его содержимого, вы либо сохраняете clearfix, либо добавляете некоторый встроенный контент, см. Этот пример, где я добавил текст под плавающие блоки jsfiddle.net/mrpollo/SrURv Я добавил оба прозрачных, чтобы они оставались внизу - person rroche; 02.01.2012