Question

我需要使用什么CSS才能使一个img＆＃34;正在建设中＃34;被覆盖在第一张图像的左上角。与此相关的脚本部分是行中的第二列。我已经尝试过在css中使用position的各种解决方案但是没有提出任何与页面大小调整一致的内容。我需要一个响应式解决方案

<script>
    <![CDATA[
        --YOUR SCRIPT--
    ]]>
</script>

修改我修改了将图像包含在div中并提供了一些额外的CSS。

    <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>

编辑2

我试图使用top和left属性来拟合它：

<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;   
}

这在我的初始宽度上工作得很好，但是当尺寸缩小到较小的窗口时，它会被推入。我希望保持一致。

Answer 1

以下是如何将图片放在另一张图片上方：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;
}

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

1 个答案: