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

Question

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

Answer 1

Почему бы не держать его свет и совместимый браузер.

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

Answer 2

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

Answer 3

Вы можете сделать это с помощью 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/

Answer 4

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

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

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

Answer 5

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

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

1. Подделка это

Demo on JSLint.

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

2. Canvas текст

Demo on JSLint

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

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

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

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

Answer 6

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

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

Answer 7

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

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