动态改变元素的背景（梯度）

我需要改变卡的背景颜色“拖动”动态的同时拖动的元素。

但卡的背景应根据线条渐变颜色进行更改。

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

回答