Question

我尝试对图片进行叠加，但我有两个问题：

$(document).ready(function () { 
  $('#boximmagini img').click(function(){
    $("#immagine img:last-child").remove()
    var source= $(this).attr('src');    
    $('#immagine').append("<img src="+source+"/>")
    $('#overlay').fadeIn('fast');
    $('#box').fadeIn('slow');   
  });
  $(".chiudi").click(function(){
    $('#overlay').fadeOut('fast');
    $('#box').hide();
  }); 
  $("#overlay").click(function(){
    $(this).fadeOut('fast');
    $('#box').hide();
  }); 
});

.chiudi{                 
  cursor:pointer;
}
.overlay{               
  position:fixed;
  top:0px;
  bottom:0px;
  left:0px;
  right:0px;
  z-index:100;
  cursor:pointer;
}   

#box{ 
  width:600px; 
  height:400px;               
  display:none; 
  z-index:+300; 
  position:absolute; 
  left:30%; 
  top:20%;            
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="overlay" id="overlay" style="display:none"></div>
<div id="box">
  <div class="chiudi">CHIUDI</div><br>
  <div id="immagine"></div>
</div> 
<div id="boximmagini">
  <div><b>Clicca</b></div>
  <img src="http://i62.tinypic.com/icpph2.jpg" class="imgoverlay" style="width: 31%" />       
</div>

问题：

我不知道屏幕中间的位置 #box 。 左：30％，它不在屏幕中间。我已经阅读了其他问题，其中很多用户建议使用具有位置相对的div，并且在其中使用位置绝对的div。但就我而言，我认为这是不可能的。
当框淡出，我调整窗口大小时，框是“out”窗口（原因是左边属性）

我希望你能帮助我！

抱歉我的英文

谢谢！

Answer 1

我这个小提琴我设置你的变化颜色，并确保它总是在中间，设置左：50％和translate3d -50％将始终设置为中心，因为绝对位置，如果你也想垂直定位对于顶部和-50％对y（第二个参数）执行相同的操作：http://jsfiddle.net/whb3mpg4/7/

#box{ 
  width:600px; 
  height:400px;               
  display:none; 
  z-index: 300; 
  position:absolute; 
  top:20%;      
  left:50%;
  transform: translate3d(-50%,0,0);
}

#box img{
    position:absolute;
    left:50%;
    transform: translate3d(-50%,0,0);
}

我知道我可以为两者使用相同的CSS类但我想保持清晰，不要更改JS或CSS defenitions

希望这有助于你。

图像叠加不起作用

1 个答案: