我如何使用以下方式动态更改CSS中的图像

Question

我试图动态更改背景图像，但我无法使用"包装器：{} {} jquery $('。包装器：之前(

>

.wrapper:before {
content: "";
position: fixed;
left: 0;
right: 0;
z-index: -1;
display: block;
background: url("https://image.tmdb.org/t/p/original/m1gYsC1uAu6EDc5pVIZ29DgwSrH.jpg");
background-size: cover;
width: inherit;
height: inherit;
-webkit-filter: blur(25px);
-moz-filter: blur(25px);
-o-filter: blur(25px);
-ms-filter: blur(25px);
filter: blur(25px);
}

.wrapper {
display: inherit !important;
height: 100% !important;
width: 100% !important;
padding: unset !important;
position: fixed;
left: 0;
right: 0;
z-index: 0;
color: #aaa;
overflow-x:scroll;
}

jQuery看起来像这样

var image = "https://image.tmdb.org/t/p/w1280/" + data.backdrop_path;
    $('.wrapper:before').css('background-image', 'url('+image+')');

我该怎么做？

Answer 1

wrapper.before不允许映像参考，但是您可以使用jQuery查找wrapper.before并添加类。wrapper.before将在.wrapperdiv中呈现为::before，因此使用一些jQuery，如果它包含字符串::before并添加一个类。

。

$("div,wrapper:contains('::before')").addClass("monkey");

这是一个JSFIDDLE