如何让这个精灵按照我的想法行事？

我有我的div中包含有一个背景图像以下的HTML。这是一幅全宽图像，我希望占用整个屏幕并保持以响应式设计的宽度折叠为中心。我也有一个头，并且具有相同的行为相似的全长图像的页脚，但不是我只显示了中间的形象在这里代码：如何让这个精灵按照我的想法行事？

<div id="contain"> 
    <div id="middle_contain"> 
     <div class="lawyer_select"> 
      <div class="lawyer_hold"> 
       <img src="images/example.jpg" width="252" height="286" alt="stuff" /></div> 
      <div class="lawyer_hold"> 
       <img src="images/example.jpg" width="252" height="286" alt="things" /> 
       </div> 
      </div> 
     </div> 
    </div>

它具有以下CSS：

#middle_contain{ 
     background-image:url(../images/layout/main-example.jpg); 
     background-position:center; 
     background-size:cover; 
    -moz-background-size: cover; 
    -webkit-background-size: cover; 
    -o-background-size: cover; 
     background-size: cover; 
} 
.lawyer_hold{ 
    height:312px; 
    width:480px; 
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7); 
    float:left; 
    margin-top:30px; 
} 
.lawyer_hold:nth-child(2){ 
    float:right; 
    margin-top:30px; 
}

现在，我遇到的情况是，而不是加载中间包含图像加上页眉和页脚图像，我想将它们组合成一个精灵。我无法获得正确的代码，尽管如此，我的图像仍然保持居中等崩溃状态。我已经尝试了以下CSS，它将图像正确放置在我最大的屏幕分辨率上，但是现在，当我折叠其他所有内容时，这些分辨率都会消失。如何正确维护覆盖背景并在使用精灵时保持居中？这是可能的还是应该坚持三个单独的图像？

#middle_contain{ 
    background-image:url(../images/layout/main-example.jpg); 
    background-position:center; 
    background-position:0px -167px; 
    background-size:cover; 
     -moz-background-size: cover; 
     -webkit-background-size: cover; 
     -o-background-size: cover; 
    background-size: cover; 
}

来源

2013-12-15 absentx

不可能让背景图像精灵动态改变大小只是CSS（至少据我已经能够）。如果你想使用精灵，你应该使用JavaScript，但是不能保证移动设备会支持Javascript，所以这是一个有争议的问题。

你无法严格调整CSS的原因是因为图片不能保持比例; HTML元素的宽度会改变，但高度不会。如果有什么方法可以让元素严格使用CSS来保持这些比例，那么我很乐意知道并且会挑起一些示例代码，但就目前而言，我不相信这是可能的。

在这种情况下，最好坚持使用3张独立的图片。但是，您可以精灵图像不会调整大小。

来源

2013-12-15 20:02:40

如何让这个精灵按照我的想法行事？

回答

相关问题