javascript - 动态改变元素背景(渐变)

Question

考虑情况http://codepen.io/anon/pen/JdGYBN

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

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

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 并且只在放置后更新元素位置。这会导致背景在拖动时粘住。 jQuery UI Draggable拖动时改变位置以获得所需的效果。

我调整了your demo accordingly .