Làm mờ các cạnh của div bằng jQuery

Question

Làm thế nào tôi có thể làm mờ các cạnh của div bằng jQuery? Hãy suy nghĩ của một băng chuyền với hình ảnh bên trong mà trượt theo chiều ngang. Làm thế nào tôi có thể phai ra bên trái và bên phải để hình ảnh gần các cạnh biến mất dần dần.

Hy vọng điều đó rõ ràng. :)

Answer 1

Một cách dễ dàng có thể hiển thị một tập hợp các div trên các cạnh như dải dọc với các mức độ mờ khác nhau, tạo ấn tượng về hình ảnh bị mờ dần.

Answer 2

Giống như Alex đã nói, cách dễ nhất có lẽ là che phủ một thứ gì đó để làm mờ đi số lẻ tiềm ẩn. Tuy nhiên, tôi chỉ đơn giản là sử dụng một gradient trong suốt png.

này sẽ không dễ dàng làm việc trong IE6 mặc dù, nhưng luôn luôn có một cách (Cá nhân tôi không hỗ trợ IE6 nữa):

http://24ways.org/2007/supersleight-transparent-png-in-ie6

Answer 3

Bạn có thể sử dụng nó để thiết lập một vài divs với giảm tính minh bạch và đặt vào một chiếc mặt nạ trên mục mà bạn muốn làm mờ dần, như mô tả ở đây: http://www.bennadel.com/blog/1014-Creating-Transparent-Gradients-With-jQuery.htm

Answer 4

tôi nghĩ rằng đây có thể là loại mà bạn đang tìm kiếm: http://hunyadi.info.hu/en/projects/sigplus/testsuite/30-sigplus-sliders

Rich

Answer 5

Trình duyệt webkit (tức là Chrome và Safari) hỗ trợ thuộc tính CSS được gọi là -webkit-mask, cho phép bạn che phủ phần tử có hiệu ứng CSS3 (tức là một đường thẳng).

Nguyên tắc stylesheet sau đây sẽ áp dụng một lợi thế cạnh trắng mờ dần đến các yếu tố với lớp .mask:

.mask { 
    -webkit-mask: -webkit-linear-gradient(
      left, 
     rgba(255,255,255,0), 
     rgba(255,255,255,1) 5%, 
     rgba(255,255,255,1) 95%, 
     rgba(255,255,255,0) 
    ); 
} 

Thật không may, điều này sẽ chỉ làm việc trong các trình duyệt webkit-based. Nếu bạn muốn hỗ trợ mọi thứ khác (mà bạn có thể làm), bạn có thể sử dụng PNG trong suốt tốt nhất.

Answer 6

Bạn có thể thử một bóng tối inset trên div chứa các hình ảnh, hoặc một hộp đơn pixel rộng với một bóng đầu bên trái hoặc bên phải. Bạn có thể có một loạt các bóng được áp dụng cho css cho các phần tử bên ngoài này, xây dựng từ một bóng rất trong suốt nhưng rộng đến một cái bóng khá mờ đục. Bạn cũng có thể áp dụng các bóng tối này cho chỉ một bên của một phần tử.

cho inset: (bạn sẽ phải làm cho lớp phủ cao hơn container cho những hình ảnh, nhưng chiều rộng tương tự, và nổi nó cao hơn, nếu nó là cùng một chiều cao bóng sẽ xuất hiện từ mọi phía)

#container_overlay{ 
    box-shadow: inset 0px 0px 10px 10px white; 
    z-index:5;// higher than the container with the images 
} 

cho một phần tử ở hai đầu, sử dụng bóng hộp thông thường.

#end_overlay{ 
    width:2px; 
    box-shadow: 0px 0px 10px 10px white; 
    z-index:5;// higher than the container with the images 
} 

float ở bên trái hoặc bên phải và nó sẽ hoạt động trên mọi trình duyệt hiểu lớp phủ và mọi thứ không có lớp phủ sẽ bỏ qua. Tôi không nghĩ rằng bạn cần phải có bất cứ điều gì bên trong này, vì vậy nó sẽ là một đối tượng vô hình với bóng đổ ra ngoài.

Tôi đã thấy điều này được sử dụng để sửa đổi khu vực trên cùng và dưới cùng của một số ứng dụng tạp chí, vì vậy văn bản trông giống như nó biến mất khi nó rời khỏi trang.