Tworzenie liniowego przezroczystego gradientu do elementu div

Question

Chciałbym utworzyć liniowy przezroczysty gradient do elementu div. Czy jest jakiś sposób to zrobić z jquery? A może powinienem użyć innej biblioteki, takiej jak raphaeljs? Chciałbym uzyskać efekt podobny do poniższego:

Answer 1

Dlaczego nie przechowywać go światło i przeglądarka kompatybilne.

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

Answer 2

Nie wiem, co dokładnie szukasz ale przyjrzeć Gradienter jQuery plugin.

Answer 3

Można to zrobić za pomocą CSS3:

E.g.

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

utworzonego to za pomocą Raphael js http://www.jsfiddle.net/pahnin/fsdnW/4/ kasę jeśli u jak to

edycja ** **

utworzonego przez wprowadzenie rectagle gradientu i czyni go w taki sam rozmiar jak div

Answer 5

Podejściem trudnym jest to, że gradient w twoim przykładzie jest równomiernie odwzorowany zarówno na tekst, jak i na pojemnik. Łatwo jest odwzorować przezroczysty gradient na właściwość tła, jak wykazało wiele osób, ale to pozostawi tekst niezmieniony.

Niestety, nie sądzę, że istnieje jakiś prosty sposób uzyskania pożądanego efektu gradientu bez kompromisów, w zależności od potrzeb, które mogą być wartościowymi rozwiązaniami. W tym celu, oto dwa przykłady, jak osiągnąć efekt pokazany na przykładowym obrazie, zarówno przy użyciu <canvas>.

1. udaje

Demo on JSLint.

To jest proste, można umieścić element <canvas> nad bloku tekstu i rysować w gradiencie od całkowicie przezroczysty do koloru tła poniżej bloku tekstu . Nie jest tak naprawdę przezroczysty, więc w rzeczywistości nie ujawnia żadnych informacji poniżej, ale jeśli próbujesz przejść do solidnego, z góry określonego koloru, to działa całkiem nieźle.

2. tekst Canvas

Demo on JSLint

Ten przykład jest bardziej skomplikowany, ale w pełni replikuje przezroczysty efekt pokazany na swoim przykładzie. Zasadniczo całkowicie blokuje tekstowy blok HTML i po prostu rysuje cały shabang na <canvas>.Ma jednak pewne wady:

1. Płótno nie wydaje się podoba zawijanie tekstu, więc trzeba by określić poszczególne linie.

2. Tekst na płótnie może mieć nieco mętne implementacje przeglądarki.

3. Dostępność & SEO, choć można łatwo napisać wtyczkę jQuery do przekształcania zwykłych elementów DOM z tekstem w to rozwiązanie w czasie wykonywania.

Answer 6

Utworzono go przy użyciu jquery i 112 div. Element nadrzędny dla dziesięciu wierszy tekstu powoduje, że każdy jest bardziej przezroczysty, a element div zawierający tło o wartości 100 div jest przezroczysty.

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

Answer 7

Jak bArmageddon wskazał, przyjętego rozwiązania nie rozwiązuje problemu - po prostu zanika tła. Prostym rozwiązaniem byłoby użycie: przed lub: po dodaniu gradientu nad tekstem:

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