无法将css图像插入伪：之前

Question

我正在尝试将背景图片插入到 header:before 元素中，但 jquery 失败。

HTML 内容

 <a href="image.jpg" class="image-source">Try insert image into .header:before</a>

JS

 $('.image-source').click(function() {
   var src = $(this).attr('href');
    // slash is okay
    $('.header:before').css('backgroundImage', 'url(/' + src + ')'); 
    return false;
 });

CSS：

.header {
  position: relative;
  background: url(anotherimage.jpg) no-repeat;
}
.header:before  {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  min-width:50%;
  min-height:50%;
  content: "";
}

有谁知道我是在这里处理一个错误，还是错过了一个明显的错误？ 请注意，我不能使用.header 本身，因为我正在处理多个背景图像，这就是我需要:before 的原因。

更新： 可能是这样的：

• http://www.w3.org/TR/2009/CR-CSS2-20090908/generate.html#x2

• Target :before and :after pseudo-elements with jQuery

Answer 1

您可以将背景图像作为直接内容插入，而不是使用 javascript

.header:before  {
  ...
  content: url(...);
}

Answer 2

我认为最好的办法是这样做： css：

header.first:after{/* your image etc */}
header.second:after{/* your image etc */}
header.third:after{/* your image etc */}

然后是 jQuery：

var headers = ["first","second","third"];
var i = 0;
$(".next").click(function(){
  i %= headers.length;
  $("header").removeClass(headers[i-1]).addClass(headers[i]);
  i++;
});

Answer 3

您不能使用 jQuery 操作伪元素。它们不是 DOM 的一部分。您可能还想避免丑陋的解决方法。

这是最丑陋但我最好的解决方法之一

var css = '.image:after { content: url("https://www.google.com/images/srpr/logo3w.png");  width: 400px; height: 100px; }';

$("#replaceable").html(css);
$("div").addClass('image');

$("div").click(function() {
    var css = '.image:after { content: url("http://www.google.com/logos/2012/elias_lonnrot-2012-hp.jpg");  width: 400px; height: 100px; }';
    $("#replaceable").html(css);
});

Demo