1

如果我在这里尝试的尝试完全错误，我实际上不知道如何编写 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因为我没有不想搜索整个页面内的标签，而只搜索容器的内容。

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

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

4 回答 4

2

你的解决方案会奏效。

只是这样的引号：

<script type="text/javascript">
    $(document).ready(function() {
       $('.ar_content').css('background-image', 'url('+document.getElementsByTagName("img")[0].getAttribute("src")+')');
    });
</script>
于 2013-09-27T12:42:44.307 回答
1

我得到了一个完美解决我的问题的解决方案，这样这个问题就可以得到答案，以防其他人面临同样的问题。

<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>
于 2013-09-27T22:02:02.147 回答
0

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

<script>
$(document).ready(function() { 
    $('.ar_content').css('background-image', 'url('+$("img:first")attr("src")+')');
});
</script>
于 2013-09-27T12:27:57.853 回答
0

我喜欢把一些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();
        });
于 2015-06-06T20:32:46.100 回答