Question

背景图片有一些令人羡慕的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') + ')'});

非常感谢任何帮助。欢呼声。

Answer 1

你可以试试这个：

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

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

Demo

Answer 2

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

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

Answer 3

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

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

http://jsfiddle.net/x5kbA/

CSS / JQuery：将href设置为背景图像

3 个答案:

Demo