動態改變元素的背景（梯度）

我需要改變卡的背景顏色「拖動」動態的同時拖動的元素。

但卡的背景應根據線條漸變顏色進行更改。

background: linear-gradient(to bottom, rgba(255,2,2,1) 0%,rgba(242,255,0,1) 34%,rgba(16,255,0,1) 66%,rgba(255,255,255,1) 100%);

不喜歡包含所有漸變的卡片「badone」。

因此，在容器卡的背景上應該大多是紅色的。底部大多是白色的。

任何建議如何實現？希望你能理解我。

2015-05-08 mef_

訣竅是設置拖動的元素的background-size到容器的大小和background-attachment到fixed像這樣：

#draggable { 
    background: /* linear gradient */; 
    background-size: 900px 500px; 
    background-attachment: fixed; 
}

的draggability插件使用translate同時拖動和下降之後僅更新元素位置。這會導致背景在拖動時粘到。 jQuery UI Draggable在拖動期間改變位置，從而產生期望的效果。我已經調整了your demo accordingly。

2015-05-08 11:06:47 miensol

從文檔的draggabilly利用dragMove事件，以確定所述元件的位置的同時拖動並與線和最小和最大色彩的高度的函數生成RGB的顏色值I寫的一個example根據我的理解，這裏的使顏色生成功能準確，可拖動元素的顏色更加準確。

[1]: http://codepen.io/anon/pen/oXbjrE

2015-05-08 11:09:08 Sagar

回答