Question

我试图将一个背景图像插入标题：在元素之前，但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的原因。

更新可能是这样的：

Answer 1

你不能使用jQuery操纵Pseudo Elements。它们不是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

Answer 2

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

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

Answer 3

我认为你最好的方法是做到这一点：的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++;
});

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

3 个答案:

Demo