如何从img元素更改图像的正文背景

How to change body background with image from img element

本文关键字：图像 正文 背景 img 元素      更新时间：2023-09-26

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

<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>

和我需要改变身体背景与其中的第一个当图像加载，但没有新的请求服务器的图像。我怎么能做到呢?谢谢。

$('#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
}

试试这个

<!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>
你也可以使用background-image 
$('body').css('background-image','url('+$('#barber').attr('src')+')');
相关文章：