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

标签 javascript css draggable

考虑情况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”那样包含所有渐变。

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

有什么建议如何实现吗?希望你能理解我。

最佳答案

技巧是将拖动元素的 background-size 设置为容器的大小,并将 background-attachment 设置为 fixed,如下所示:

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

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

我已经调整了your demo accordingly .

关于javascript - 动态改变元素背景(渐变),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30121344/

相关文章:

javascript - 在自动 Javascript 幻灯片中单击箭头时出现空白

javascript - 可拖动的包含选项不限制元素的右侧或底部边框?

jQuery 的 draggable() 函数不起作用

javascript - 从一个 View 触发事件到另一个 View

javascript - 为什么从 Vuejs 中使用 Laravel 8 的 AJAX POST 请求会抛出 405(不支持方法)错误?

javascript - 将 Javascript 添加到 WordPress 的每个页面(除了管理页面)

css - 如何删除我的 wordpress 2016 上的空白

javascript - 使用 CSS block 显示/隐藏文本

css - 我的 div 没有正确对齐

jquery - Div 在调整大小时向上(并超过)可调整大小的 div