Question

我实际上不知道如何编写一个jQuery脚本，如果我尝试在这里尝试完全错误，请提前对不起。

我正在浏览一个博客主页的主页，我希望将第一个图像展示为缩略图，它具有固定的1：1比例并具有响应性。我知道我希望最终得到的东西可以通过设置容器的CSS来实现 background: url(fistImageURL); background-size: cover; 问题是，在图像标签中我可以使用expr:src='data:i.firstImageUrl'来获取源代码，但是我不能将url(data:i.firstImageUrl)放在我的CSS中，所以我尝试搜索jQuery解决方案来解决我的问题。

我确实尝试将一些东西放在一起我在互联网上找到了但我没有工作，这实际上并不让我感到惊讶。

无论如何，它确实如此，所以也许你可以理解我试图实现的目标。

<script tpye="text/javascript">
    $(document).ready(function() {
      $('.ar_content').css('background-image', 'url(document.getElementsByTagName("img")[0].getAttribute("src"))');
    });
</script>

非常感谢每一个解决方案。

修改这确实可以完成部分工作，但我仍然在寻找一些不同的东西。

<script tpye='text/javascript'>
    $(document).ready(function() {
       $('.ar_content').css('background-image', 'url('+document.getElementsByTagName("img")[0].getAttribute("src")+')');
    });
</script>

这样做是将我的div的背景与类ar_content设置为页面的第一个图像，但我需要的是将容器中的图像设置为背景图像，所以我想我应该替换document，因为我不想在整个页面中搜索标签，而只是搜索容器的内容。

只是为了拥有一切，那就是Markup。背景图像应该是图像标记的来源。

<div class='ar_content'>
    <a expr:href='data:i.url'><img class='img' expr:src='data:i.firstImageUrl'/></a>
</div>

Answer 1

您的解决方案可行。

这只是这样的引用：

<script type="text/javascript">
    $(document).ready(function() {
       $('.ar_content').css('background-image', 'url('+document.getElementsByTagName("img")[0].getAttribute("src")+')');
    });
</script>

Answer 2

我得到了一个完全适用于我的问题的解决方案，所以这个问题得到了答案，以防其他人面对同样的事情。

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('.ar_content').find('img').each(function(n, image){
        var image = $(image);
        var thisurl = $(this).attr('src');
        image.parents('.ar_content').css('background-image', 'url(' + thisurl + ')');
      });
    });
//]]>
</script>

Answer 3

您可以将图像src复制到背景中，如：

<script>
$(document).ready(function() { 
    $('.ar_content').css('background-image', 'url('+$("img:first")attr("src")+')');
});
</script>

Answer 4

我想把一些img作为这样的背景。

 $('.imgwrap').find('img').each(function(n, img) {
            img = $(img);
            var imgUrl = $(this).attr('src');
            img.parents('.imgwrap').css({
                'background': '#fff url(' + imgUrl + ') center center no-repeat',
                'background-size': 'cover',
                '-webkit-background-size': 'cover',
                '-moz-background-size': 'cover',
                '-o-background-size': 'cover'
            });
            img.remove();
        });

获取图像源路径并在div容器中设置为背景图像

4 个答案: