Jquery 如何将ID/class设置为类的背景图像

如何为容器的背景图像设置ID，以便调整其属性？不幸的是，我不能从html文件中调用图像，因为图像会动态更改track.artwork\u url

$('.musiccontroller').css('background-image', 'url(' + track.artwork_url + ')');

    $('.musiccontroller').css({ 

     "background-size": "100%",
      "-webkit-filter": "blur(10px)",
      "opacity": ".5"
}); 

---

现在，这会使整个容器变得模糊和不透明，而在这种特殊情况下，这意味着可以对背景进行的唯一控制就是相应地设置颜色

---

如果你想要完全的CSS控制，你必须把背景放在一个专门为这个目的而存在的元素中，然后以一种适合你的方式将该元素组合到布局中。

首先，如果你使用的是div ID，它应该是musiccontroller

$(document).ready(function(){
$('#musiccontroller').css({"background-size": "100%","-webkit-filter": "blur(10px)","opacity": ".5"});
});

---

现在，一旦页面加载，musiccontroller的背景图像将根据CSS调整进行更改。因此，只需将您的背景图像设置为musiccontroller的背景，或者如果您不想操纵musiccontroller，请制作另一个分隔器作为背景容器。

正如前面所说，您不能向背景图像添加ID，但您应该能够通过此操作获得所需的效果。在可能的情况下，优化这个以使用CSS将是一个好主意

$('.musiccontroller').css('position', 'relative');
$('<div class="musiccontroller-bg"></div>')
    .css({
        'background-image', 'url(' + track.artwork_url + ')'
        "background-size": "100%",
        "-webkit-filter": "blur(10px)",
        "opacity": 0.5,
        "position": "absolute",
        "left": 0,
        "right": 0,
        "top": 0,
        "bottom": 0
    })
    .appendTo($('.musiccontroller'))

---

只有HTML元素可以有ID。背景图像是css样式，而不是HTML元素。因此，似乎不可能完全按照你的要求去做。背景图像被附加到一个可以有ID的元素上。你不能在背景图像本身上有ID。修改背景图像的所有属性都可以应用于具有背景图像的元素。如果您需要更多的控制，您可以绝对定位伪元素之前/之后的位置，或者创建另一个DOM元素。