Tạo đường viền trong suốt tuyến tính đến một div

Question

Tôi muốn tạo một đường viền trong suốt với một div. Có cách nào để làm điều đó với jquery? Hay tôi nên sử dụng một số thư viện khác như raphaeljs? Tôi muốn để đạt được một hiệu ứng như sau:

Answer 1

Tại sao không giữ cho nó ánh sáng và trình duyệt tương thích.

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

Answer 2

Không chắc gì chính xác bạn đang tìm kiếm nhưng hãy nhìn vào Gradienter jQuery plugin.

Answer 3

Bạn có thể làm điều đó với CSS3:

Ví dụ:

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

tôi tạo này sử dụng Raphael js http://www.jsfiddle.net/pahnin/fsdnW/4/ thanh toán nếu u thích nó

** chỉnh sửa **

tôi tạo ra nó bằng cách thêm một rectagle với độ dốc và làm cho nó như cùng kích thước như div

Answer 5

Bit khó hiểu ở đây là gradient trong ví dụ của bạn được ánh xạ đều đến văn bản cũng như vùng chứa. Thật dễ dàng để ánh xạ một gradient trong suốt đến thuộc tính nền, như nhiều người đã hiển thị, nhưng điều đó sẽ để lại văn bản không thay đổi. Thật không may, tôi không nghĩ rằng có một cách đơn giản để có được hiệu ứng gradient mà bạn muốn mà không thực hiện một số thỏa hiệp, tùy thuộc vào nhu cầu của bạn mà họ có thể là giải pháp đáng giá. Vì vậy, để kết thúc, đây là hai ví dụ về làm thế nào để đạt được hiệu quả thể hiện trong hình ảnh ví dụ của bạn, cả hai bằng cách sử dụng <canvas>.

1. Giả mạo nó

Demo on JSLint.

này rất đơn giản, bạn định vị một yếu tố <canvas> trên khối văn bản của bạn và thu hút một gradient từ hoàn toàn trong suốt đối với màu của nền dưới khối văn bản . Nó không thực sự minh bạch, vì vậy nó không thực sự tiết lộ bất kỳ thông tin dưới đây, nhưng nếu bạn đang cố gắng để mờ dần đến một màu sắc được xác định trước, sau đó điều này hoạt động khá tốt.

2. Canvas văn bản

Demo on JSLint

Ví dụ này là phức tạp hơn, nhưng hoàn toàn tái tạo hiệu ứng trong suốt thể hiện trong ví dụ của bạn. Về cơ bản, nó bỏ hoàn toàn khối văn bản HTML, và chỉ vẽ toàn bộ shabang vào <canvas>.Tuy nhiên, nó có một số nhược điểm:

1. Các vải dường như không thích gói văn bản, vì vậy bạn sẽ phải chỉ định dòng cá nhân.

2. Văn bản canvas vẫn có thể có các triển khai trình duyệt hơi tối tăm.

3. Trợ năng & SEO, mặc dù bạn có thể dễ dàng viết một plugin jQuery để chuyển đổi các phần tử DOM thông thường bằng văn bản vào giải pháp này khi chạy.

Answer 6

Tôi đã tạo bằng jquery và 112 div. Một div cha cho mười dòng văn bản div mỗi minh bạch hơn, và một div nền với 100 divs mỗi minh bạch hơn.

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

Answer 7

Như bArmageddon chỉ ra, các giải pháp được chấp nhận không giải quyết được vấn đề - nó chỉ mất dần nền. Một giải pháp đơn giản sẽ được sử dụng: trước hoặc sau khi thêm gradient trên văn bản:

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