Bootstrap（CSS） - 使用响应式设计覆盖另一个Img

我需要使用哪些CSS，以便在第一张图像的左上角覆盖一个img“正在建设中”。与此相关的脚本部分是该行中的第二列。我尝试过使用CSS中的位置的各种解决方案，但没有提出任何与页面大小调整一致的解决方案。我需要一个响应式解决方案Bootstrap（CSS） - 使用响应式设计覆盖另一个Img

<div class="col-lg-6"> 
     <h2 class="text-center">Current Conditions</h2> 
     <img src="@Url.Content("~/Content/Img/weather4.png")" id="current-weather-logo" class="img-responsive center-block" /> 
     <p class="text-center">View the current weather conditions in relation to Crestwood Assets</p> 
     <p class="text-center"> 
      <a href="@Url.Action("CurrentWeather","Home")" class="btn btn-primary"> Launch <span class="glyphicon glyphicon-chevron-right"></span></a> 
      <a href="@Url.Action("CurrentConditionsDoc","Home")" class="btn btn-primary disabled"> Documentation <span class="glyphicon glyphicon-chevron-right"></span></a> 
     </p> 

    </div> 

    <div class="col-lg-6"> 
     <h2 class="text-center">Historical Weather</h2> 
      <img src="@Url.Content("~/Content/Img/weather4.png")" id="current-weather-logo" class="img-responsive center-block" /> 
      <img src="@Url.Content("~/Content/Img/under-construction.png")" id="under-construction" class="img-responsive center-block img-overlay" /> 
     <p class ="text-center">Leverage historical weather data for analysis with asset data.</p> 
      <p class ="text-center"> 
       <a href="@Url.Action("HistoricalWeather","Home")" class="btn btn-primary"> Launch <span class="glyphicon glyphicon-chevron-right"></span></a> 
       <a href="@Url.Action("HistoricalWeatherDoc", "Home")" class="btn btn-primary disabled"> Documentation <span class="glyphicon glyphicon-chevron-right"></span></a> 
      </p> 
    </div> 
</div>

EDIT 我修改为包括在一个div图像并提供了一些附加的CSS。

<div id="img-container"> 
    <img src="@Url.Content("~/Content/Img/weather4.png")" id="current-weather-logo" class="img-responsive center-block" /> 
    <img src="@Url.Content("~/Content/Img/under-construction.png")" id="under-construction" class="img-responsive center-block img-overlay" /> 
</div> 




.img-overlay{ 
position:absolute; 
top:0; 
left:0; 
z-index:3;  
} 

#img-container{ 
position:relative; 
}

EDIT 2

我尝试使用上边和左边的属性，以适应它：

.img-overlay{ 
position:absolute; 
top:0; 
left:14.5%; 
z-index:3; 
}

这在我的初始宽度伟大的工作，但是当大小，缩小到一个更小的窗口，它被推入。我想要保持一致。

来源

2016-05-12 LCaraway

你可以将你的代码移植到像http://jsfiddle.net这样的站点上，以便创建一个到目前为止已获得的可重复演示的地方吗？如果是这样，网站上的人员将更容易为您提供帮助。使用像这样的动态服务器端代码Razor调用图像很困难，因为我们无法访问您的生产基地。 – TylerH

尝试用左：0在我的例子中，应该工作。 –

你在哪里正确，你的CSS工作。我必须添加相同的最大宽度的图像，并给它相同的引导Stap类中心块，以确保它保持响应！谢谢您的帮助。 – LCaraway

这里是如何把上述其他图片的图片：http://codepen.io/ruchiccio/pen/ZWZEEy

更重要的是我能不能帮助，因为你没有提供正常路径的图像，所以我们可以看不出应该怎么做。也许提供你想要的截图。

<div id="container"> 
<img id="pic1" src="http://placehold.it/350x150"> 
<img id="pic2" src="http://placehold.it/150x50"> 
</div> 

#container { 
    position: relative; 
} 

#pic2 { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 3; 
}

来源

2016-05-12 17:43:42

感谢您的评论。我会修改我的问题，以包含屏幕截图以及根据您的建议使用的一些代码。 – LCaraway

Bootstrap（CSS） - 使用响应式设计覆盖另一个Img

回答

相关问题