2

背景图像有一些令人羡慕的 CSS 属性，我想将它们用于照片库——也就是说，background-size: cover;让background-position: center center;您可以使用任何纵横比的图像并将其与固定大小的容器完美匹配。

但是，我真的不认为设置带有内容的背景图像是理想的。我宁愿拥有<a href="url.jpg"><img src="url.jpg"/></a>内容而不是<a href="url.jpg" style="background-image: url(url.jpg);"><img src="url.jpg"/></a>. 我认为采用前者并编写后者的脚本是理想的。

给出如下所示的代码：

<a href="http://thesundaybe.st/media/from-earth-phone-23.jpg"></a>
<a href="http://thesundaybe.st/media/from-earth-phone-24.jpg"></a>
<a href="http://thesundaybe.st/media/from-earth-phone-26.jpg"></a>
<a href="http://thesundaybe.st/media/from-earth-phone-27.jpg"></a>
<a href="http://thesundaybe.st/media/from-earth-phone-28.jpg"></a>
<a href="http://thesundaybe.st/media/from-earth-phone-29.jpg"></a>
<a href="http://thesundaybe.st/media/from-earth-phone-30.jpg"></a>

我正在尝试编写一个 JQuery 脚本来获取 href URL 并将其设置为背景图像。基本上，把上面的代码变成这样：

<a href="http://thesundaybe.st/media/from-earth-phone-23.jpg" style="background-image: url(http://thesundaybe.st/media/from-earth-phone-23.jpg);"></a>
<a href="http://thesundaybe.st/media/from-earth-phone-24.jpg" style="background-image: url(http://thesundaybe.st/media/from-earth-phone-24.jpg);"></a>
<a href="http://thesundaybe.st/media/from-earth-phone-26.jpg" style="background-image: url(http://thesundaybe.st/media/from-earth-phone-26.jpg);"></a>
<a href="http://thesundaybe.st/media/from-earth-phone-27.jpg" style="background-image: url(http://thesundaybe.st/media/from-earth-phone-27.jpg);"></a>
<a href="http://thesundaybe.st/media/from-earth-phone-28.jpg" style="background-image: url(http://thesundaybe.st/media/from-earth-phone-28.jpg);"></a>
<a href="http://thesundaybe.st/media/from-earth-phone-29.jpg" style="background-image: url(http://thesundaybe.st/media/from-earth-phone-29.jpg);"></a>
<a href="http://thesundaybe.st/media/from-earth-phone-30.jpg" style="background-image: url(http://thesundaybe.st/media/from-earth-phone-30.jpg);"></a>

这是一个带有基本 HTML/CSS 设置的 jsfiddle，只需要一点 JQuery：http: //jsfiddle.net/MRSallee/tv3q8/3/

从理论上讲，这就是脚本发挥作用时的样子：http: //jsfiddle.net/MRSallee/tv3q8/

我非常接近这一点 JQuery，但它似乎只是使用第一个 href 作为所有<a>标签的背景图像。

$('a').css({'background-image': 'url(' + $('a').attr('href') + ')'});

任何帮助是极大的赞赏。干杯。

4

3 回答 3

5

你可以试试这个：

$('a').css('background-image', function() {
    return 'url(' + this.href + ')';
});

each循环将在内部使用，因此它相当于$('a').each+$(this).css组合。

演示

于 2013-04-21T17:54:32.443 回答
1 
$('a').each(function(){
   $(this).css({'background-image': 'url(' + $(this).attr('href') + ')'});
});

http://jsfiddle.net/mohammadAdil/tv3q8/8/

于 2013-04-21T17:51:05.323 回答
1 
$('a').each(function(){    
 $(this).css({'background-image': 'url(' + this.href + ')'});
});

这里this指的是迭代中的当前元素。

http://jsfiddle.net/x5kbA/

于 2013-04-21T17:52:18.527 回答