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

Question

Я хотел бы создать линейный прозрачный градиент для div.Есть ли способ сделать это с помощью jquery?Или я должен использовать какую-то другую библиотеку, например, Raphaeljs?Я хотел бы добиться эффекта, подобного следующему:

Answer 1

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

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

Answer 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-градиентов /

Answer 3

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

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

Answer 4

Сложность в том, что в вашем примере градиент равномерно отображается как на текст, так и на контейнер. Как показано многими людьми, прозрачный градиент легко сопоставить со свойством background, но текст останется неизменным.

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

1. Подделка

Демонстрация JSLint.

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

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

Демонстрация на JSLint

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

1. Кажется, холст не нравится перенос текста, так что вам нужно будет указать отдельные строки.

2. Текст на холсте может иметь несколько мутные реализации браузера.

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

Answer 5

Как указал 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;
}

Answer 6

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

** edit **

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

Answer 7

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