1

我正在尝试将背景图像插入 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.

更新： 可能是这样的：

4

3 回答 3

2

您不能使用 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);
});

演示

于 2012-04-10T12:43:19.927 回答
1

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

.header:before  {
  ...
  content: url(...);
}
于 2012-04-10T12:26:57.103 回答
1

我认为你最好的办法是这样做：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++;
});
于 2012-04-10T12:34:57.817 回答