Question

我有一些隐藏的图像，标记是

<div class="images hide">
    <img id="barber" class="barber-image" src="../../Content/images/chosing_business_role/barberShopBackground.jpg" />
    <img id="beauty" src="../../Content/images/background_image.png" />
</div>

我需要在加载图像时用第一个更改正文背景，但是没有对该图像的服务器的新请求。我怎样才能做到这一点？感谢。

Answer 1

$('#barber').on('load', changeBodyBackground);
// when image loads, call function

....

function changeBodyBackground(e){
  $('body').css('background-image', $(this).attr('src'));
  // set background-image property for body
}

Answer 2

试试这个

<!DOCTYPE html>
<html>
<head>
    <script src = "jquery-1.10.2.min.js"></script>
    <style>
        .hide{display:none;}
    </style>
</head>
<body>
    <div class="images hide">
        <img id="barber" class="barber-image" src="1.jpg" />
            <img id="beauty" src="2.jpg" />
    </div>
    <script type="text/javascript">
        $('body').css('background','url('+$('#barber').attr('src')+')');
    </script>
</body>
</html>

您也可以使用背景图片

$('body').css('background-image','url('+$('#barber').attr('src')+')');

如何使用img元素中的图像更改正文背景

2 个答案: