Создание линейного прозрачного градиента для div

Ответ 1

Почему бы не сохранить его светлым и совместимым с браузером.

div
{
    backgroud-image: url('images/gradient.png');
    background-repeat: repeat-x;
    background-position: top right;
}

Ответ 2

Вы можете сделать это с помощью CSS3:

например.

div {
    opacity: 0.5;
    background: #999; /* for non-css3 browsers */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */
}

http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient/

http://gradients.glrzad.com/

http://www.colorzilla.com/gradient-editor/

http://css-tricks.com/css3-gradients/

Ответ 3

Я создал его с помощью jquery и 112 div. Родительский div для десяти строк текстовых divs более прозрачен, а фоновый div со 100 divs более прозрачен.

http://jsfiddle.net/generalhenry/bDd5w/

Ответ 4

Трудный бит здесь заключается в том, что градиент в вашем примере равномерно отображается как в тексте, так и в контейнере. Легко отобразить прозрачный градиент в свойство фона, как показали многие люди, но это оставляет текст неизменным.

К сожалению, я не думаю, что есть простой способ получить эффект градиента, который вы хотите, без каких-либо компромиссов, в зависимости от ваших потребностей они могут оказаться полезными решениями. Итак, с этой целью, вот два примера того, как добиться эффекта, показанного в вашем примере изображения, используя <canvas>.

1. Подделка

Демо на JSLint.

Это просто, вы размещаете элемент <canvas> над текстовым блоком и рисуете градиент от полностью прозрачного до цвета фона под текстовым блоком. Это не очень прозрачно, поэтому на самом деле он не раскрывает какую-либо информацию ниже, но если вы пытаетесь исчезнуть до твердого, предопределенного цвета, то это работает очень хорошо.

2. Текст холста

Демо на JSLint

Этот пример более сложный, но полностью реплицирует прозрачный эффект, показанный в вашем примере. По сути, он полностью блокирует текстовый блок HTML и просто рисует весь shabang на <canvas>. Однако у него есть некоторые недостатки:

• Холст, похоже, не похож на обертывание текста, поэтому вам нужно будет указать отдельные строки.

• Текст холста может по-прежнему иметь несколько мрачные версии браузера.

• Доступность и SEO, хотя вы могли бы легко написать плагин jQuery для преобразования регулярных элементов DOM с текстом в это решение во время выполнения.

Ответ 5

Не уверен, что именно вы ищете, но посмотрите плагин Gradienter jQuery.

Ответ 6

Я создал это с помощью Raphael js http://www.jsfiddle.net/pahnin/fsdnW/4/ checkout, если у него это нравится

** редактировать **

Я создал его, добавив прямоугольник с градиентом и сделав его таким же размером, как div

Ответ 7

Как отметил bArmageddon, принятое решение не решает проблему - оно просто исчезает на фоне. Простым решением было бы использовать: before или: after, чтобы добавить градиент над текстом:

div {
    position: relative;
}
div:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background: url("transparent_fade.png") repeat-x;
}