Линейное угасание div, содержимого и границы (сплошной сверху и прозрачный снизу)

Возможный дубликат:
Возможно ли окончить непрозрачность элемента HTML?

Я пытаюсь заставить div (и его границу и содержимое) исчезать в прозрачность (т.е. твердый сверху и прозрачный снизу) с помощью css.

Есть ли способ сделать это?

Ive смог затухать фон со следующим:

.fade-to-nothing
{
    background-image: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,1)), to(rgba(255,255,255,0)));
    background-image: -webkit-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
    background-image: -o-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
    background-image: linear-gradient(to bottom, rgba(255,255,255,1),rgba(255,255,255,0));
    background-repeat: repeat-x;
}

но не смогли найти способ сделать это с контентом/границей div. возможно, с каким-то гнездом или наложением?

ИЗМЕНИТЬ heres, что я пытался сделать:

enter image description here

Ответы

Ответ 1

Цитата из мой ответ здесь:

Отметьте рабочую демонстрацию и попробуйте добавить/удалить содержимое из #contents

HTML

<div id="container">
    <div id="contents">
        Some contents goes here
    </div>
    <div id="gradient">
    </div>
</div>

CSS

#container {
    position:relative;
}
#contents {
    background:red;
}
#gradient {
    position:absolute;
    z-index:2;
    right:0; bottom:0; left:0;
    height:200px; /* adjust it to your needs */
    background: url(data:image/svg+xml;base64,alotofcodehere);
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(70%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
    background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
}​

Это будет работать практически в любом браузере, который поддерживает непрозрачность (в том числе IE9), а здесь резервный (непроверенный) IE8 "rgba":

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );

Чтобы создать собственный градиент, посетите Colorzilla.

Первая остановка (0%) должна иметь непрозрачность 0 (rgba(255,255,255,0);), затем около 70% - выполните некоторые тесты, чтобы найти то, что хорошо для вас - добавьте еще одну остановку с непрозрачностью 1 (rgba(255,255,255,1);).

Ответ 2

Если вы знаете высоту, вы можете использовать это знание в своих интересах, вы всегда можете обновить его из js, но это кажется мне намного проще, чем определение бесчисленных градиентов http://jsfiddle.net/6cXRZ/4/ вы можете настроить свои параметры, чтобы скрыть все, что вам нравится.