Question

我正在制作一个网站，其中将有两个图像前景和背景。通过上传图像可以改变背景，前景保持不变，但如何在不对前景图像做任何事情的情况下拖动和重新调整背景图像的大小？

*{
    padding: 0px;
    margin:0px;
}


#shirt {
    margin-top: 130px;
}

#image_overlay {
    position: relative;
    left: 0;
    top: 0;
    border: 1px solid black;
    z-index: 10; 
    width: 1000px;
    height: 900px;
}

#bg_img {
    position: absolute;
    top: 25px;
    margin-top: 50px;
    left: 25px;
    right: 50px;
    z-index: 1;
    padding-right: -100px;
    width: 500px;
    height: 550px;
    opacity: 0.9;
    
}

#fg_img {
    position: absolute;
    margin-top: 50px;
    top: 25px;
    left: 25px;
    right: 25px;
    z-index: 3;
    -webkit-filter: saturate(8);
}



/*aside*/
.click_shirt{
    position: relative;
}
.one{
    width: 150px;
    height: auto;
    display: none;
    position: absolute;
    left: 52px;
    top: -2px;
    position: absolute;
}
.one ul{
    list-style: none;
    margin: 0;
}
.one ul li{
    list-style: none;
    margin-bottom: 5px;
    
}
.one img{
    width: 120px;
    height: 80px;
}

.image_upload{
    position: absolute;
    top: 1000px;
    left: 40px;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device, intial-scale=1.0" name="viewport">

    <title>Codezard</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" media="screen">
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="js/custom.js"></script>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  </style>
     
</head>

<body>
   <div id="middle_content" class="span7">
                <div id="print" class="print">
                    <div id="image_overlay">
                        <?php
                            if(isset($_GET["img"]))
                            {
                                $n=$_GET["img"];
                                echo "<img id='bg_img' src='photos/".$n."'>";
                            }
                        ?>
                       <img id="fg_img" src="http://dumpfm.s3.amazonaws.com/images/20130320/1363836943140-dumpfm-FAUXreal-black-hole-haiku-transparent-invert.png"> 
                        <form action="process.php" method="post" enctype="multipart/form-data" class="image_upload">
                            <input type="file" name="file"><br>
                            <input type="submit" name="submit">
                        </form>
                    </div>
                    
                </div>
                
                
                
            </div>   
    <script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

当前景中有透明图像时，如何在背景移动图像？

0 个答案: