带翻转的背景图片封面尺寸负责：是否有可能？

所以我有这样的挑战：背景图像在背景的身体，背景大小，适合整个屏幕覆盖。并在背景图像上是一些元素（建筑物）。所以我想把鼠标悬停在建筑物上，他们改变科洛尔或添加阴影等问题是在屏幕上调整大小，当我调整屏幕大小时，我无法找到一个将移动覆盖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

带翻转的背景图片封面尺寸负责：是否有可能？

回答

相关问题