帶翻轉的背景圖片封面尺寸負責：是否有可能？

所以我有這樣的挑戰：背景圖像在背景的身體，背景大小，適合整個屏幕覆蓋。並在背景圖像上是一些元素（建築物）。所以我想把鼠標懸停在建築物上，他們改變科洛爾或添加陰影等問題是在屏幕上調整大小，當我調整屏幕大小時，我無法找到一個將移動覆蓋div以適應建築物的公式背景。帶翻轉的背景圖片封面尺寸負責：是否有可能？

HTML：

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>website</title> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 
<link rel="stylesheet" type="text/css" href="css/style.css"> 

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> 
<script type="text/javascript" src="js/modernizr.js"></script> 
<script type="text/javascript" src="js/fixes.js"></script> 

<!--[if lt IE 9]>     
    <script type="text/javascript" src="js/css3-mediaqueries.js"></script> 
<![endif]--> 
</head> 

<body class="home"> 
    <div class="map">  
     <div class="building1"></div> 
    </div> 
</body> 
</html>

CSS：

.home{ 
    background:url(../img/homeBg1200.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

JS：

$(document).ready(function() { 
    function fixes() { 
     var windowW = window.innerWidth, 
      windowH = window.innerHeight; 

     if(windowW > 1199) { 
      var proportionH, 
       proportionW, 
       indexTop, 
       indexLeft, 
       top1, 
       left1, 
       width1, 
       height1; 



       //indexTop = (proportionH-800)/3; 

       if((windowW/windowH) < 1.5) { 
        proportionW = (windowH * 1200/800); 
        proportionH = (proportionW * 800/1200); 
        indexLeft = (proportionW - 1200)*0.001; 
        indexTop = (proportionH - 800)*0.001; 
        top1 = proportionH*0.178-indexTop; 
        left1 = proportionW*0.476-indexLeft; 
        width1 = (proportionW)*0.084; 
        height1 = (proportionH)*0.482; 
       } else { 
        proportionH = (windowW * 800/1200); 
        proportionW = (proportionH * 1200/800); 
        indexLeft = (proportionW - 1200)*0.001; 
        indexTop = (proportionH - 800)/2; 
        top1 = proportionH*0.178-indexTop; 
        left1 = proportionW*0.476+indexLeft; 
        width1 = (proportionW)*0.084; 
        height1 = (proportionH)*0.482; 
       } 

      $('.building1').css({ 
       'top': top1, 
       'left': left1, 
       'width':width1, 
       'height':height1 
      }); 

     } 
    } 

    fixes(); 

    $(window).resize(function() { 
     fixes(); 
    }); 
});

有可能實現這一目標？

謝謝

PS：剛纔複製的代碼在這裏：http://hardware-trade.com/site/

來源

2013-09-05 Vlad

此時此刻任何評論都將非常有用，即使可以實現這一點也是如此。謝謝 – Vlad

這可以被固定在無javascript環境。你應該在CSS中使用媒體查詢。

來源

2013-10-02 17:32:37 David

帶翻轉的背景圖片封面尺寸負責：是否有可能？

回答

相關問題