Question

如何将ID设置为容器的背景图像，以便我可以调整其属性？不幸的是，我不能只是从html文件调用图像，因为图像动态变化（track.artwork_url）

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

    $('.musiccontroller').css({ 

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

（现在，这会使整个容器变得模糊和不透明）

Answer 1

你不能，在这种特殊情况下，这意味着你可以在后台施加的唯一控制就是相应地设置background-related CSS properties。

如果您想要完整的CSS控件，您必须将背景放在专门为此目的而存在的元素中，然后以适合您的方式将该元素组合到布局中。

Answer 2

首先，如果您使用div ID，它应该是#musiccontroller。

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

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

Answer 3

如上所述，您无法在背景图片中添加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'))

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

3 个答案: