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

【问题标题】：Dynamically change element background (gradient)动态改变元素背景（渐变）
【发布时间】：2015-05-08 10:15:47
【问题描述】：

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

但是卡片的背景应该根据线条渐变颜色而变化。

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

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

任何建议如何实施？希望你能理解我。

【问题讨论】：

【解决方案1】：

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

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

draggability 插件在拖动时使用translate，并且仅在拖放后更新元素位置。这会导致背景在拖动时粘住。 jQuery UI Draggable 在拖动时会改变位置，从而产生所需的效果。

【讨论】：

【解决方案2】：

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

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

【讨论】：