Background images have some enviable CSS properties that I'd like to use for photo galleries -- namely, background-size: cover; and background-position: center center; let you use an image of any aspect ratio and fit it attractively to a fixed-size container.
背景图片有一些令人羡慕的CSS属性,我想用于照片库 - 即背景尺寸:封面;和背景位置:中心;让您使用任何宽高比的图像,并使其适合固定大小的容器。
However, I don't really think setting background images with content is ideal. I'd much rather have <a href="url.jpg"><img src="url.jpg"/></a> in content than <a href="url.jpg" style="background-image: url(url.jpg);"><img src="url.jpg"/></a>. I think a script to take the former and write the latter is ideal.
但是,我并不认为设置内容背景图像是理想的。我宁愿在内容中 
而不是 
。我认为采用前者并编写后者的脚本是理想的。
Given code that looks like this:
给定如下代码:
<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>
I'm trying to write a JQuery script to take the href URL and set it as the background image. Basically, turning the above code into this:
我正在尝试编写一个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>
Here's a jsfiddle with the basic HTML/CSS set up, just needing a bit of JQuery: http://jsfiddle.net/MRSallee/tv3q8/3/
这是一个基本的HTML / CSS设置的jsfiddle,只需要一些JQuery:http://jsfiddle.net/MRSallee/tv3q8/3/
And theoretically, this is what it'd look like when the script does the trick: http://jsfiddle.net/MRSallee/tv3q8/
从理论上讲,这就是脚本执行操作时的样子:http://jsfiddle.net/MRSallee/tv3q8/
I got fairly close this this bit of JQuery, but it seems to just use the first href as the background image for all of the <a> tags.
我得到了相当接近的这个JQuery,但它似乎只是使用第一个href作为所有标签的背景图像。
$('a').css({'background-image': 'url(' + $('a').attr('href') + ')'});
Any help is greatly appreciated. Cheers.
任何帮助是极大的赞赏。干杯。
3 个解决方案
#1
5
You can try this:
你可以试试这个:
$('a').css('background-image', function() {
return 'url(' + this.href + ')';
});
each loop will be used internally so it's equivalent to $('a').each + $(this).css combination.
每个循环将在内部使用,因此它相当于$('a')。每个+ $(this).css组合。
Demo
#2
1
$('a').each(function(){
$(this).css({'background-image': 'url(' + $(this).attr('href') + ')'});
});
#3
1
$('a').each(function(){
$(this).css({'background-image': 'url(' + this.href + ')'});
});
Here this refers to the current element in iteration.
这里指的是迭代中的当前元素。
#1
5
You can try this:
你可以试试这个:
$('a').css('background-image', function() {
return 'url(' + this.href + ')';
});
each loop will be used internally so it's equivalent to $('a').each + $(this).css combination.
每个循环将在内部使用,因此它相当于$('a')。每个+ $(this).css组合。
Demo
#2
1
$('a').each(function(){
$(this).css({'background-image': 'url(' + $(this).attr('href') + ')'});
});
#3
1
$('a').each(function(){
$(this).css({'background-image': 'url(' + this.href + ')'});
});
Here this refers to the current element in iteration.
这里指的是迭代中的当前元素。