动态改变元素背景（渐变）

Question

我需要在拖动元素时动态更改卡片 "draggable" 的背景颜色。

但是卡片的背景会随着线条的渐变颜色而变化。

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"。

因此，容器卡片背景的顶部应以红色为主。底部大部分是白色的。

有什么关于如何实施的建议吗？希望你理解我。

Answer 1

诀窍是将拖动元素的 background-size 设置为容器大小，将 background-attachment 设置为 fixed，如下所示：

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

draggability 插件在拖动时使用 translate，并且仅在放置后更新元素位置。这会导致背景在拖动时 stick。 jQuery UI Draggable 会在拖动时更改位置以达到所需的效果。

Answer 2

根据 draggabilly 的文档，使用 dragMove 事件确定拖动时元素的位置，并生成 RGB 颜色值，该值是线的高度以及最小和最大颜色的函数根据我的理解，我在这里写了一个 example 使颜色生成函数准确使可拖动元素的颜色更准确。

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

Dynamically change element background (gradient)