Question

嗨我想在图像上放置一个div。我不能将此图像作为背景图像放置，因为此图像将是响应式的。我正在尝试以下css，

#slider {
    margin:0 33%;
    width:67%;
    position:relative;
}

#slider img {
    width:100%;
    height:auto;
}

#slider #caption {
    position:absolute;
    width:100%;
    height:50px;
    background-color:#fff;
    opacity:.4;
    z-index:2;
}

<div id="slider">
  <img src="~/Content/Home/banner.jpg" />
  <div id="caption">President Installation</div>
</div>

任何人都可以告诉错误在哪里..谢谢

Answer 1

top和left样式可以定位此元素，因为position:absolute：

#slider #caption {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:50px;
    background-color:#fff;
    opacity:.4;
    z-index:2;
}

JSFiddle

Answer 2

只需设置标题的顶部位置即可。请参阅Live demo

#slider #caption {
     position:absolute;
     width:100%;
     height:50px;    top:200px;
     background-color:#fff;
     opacity:.4;
     z-index:2; }

Answer 3

如果#caption div要放在img上，你需要先设置图像的位置。

#slider img {
 width:100%; height: auto;
 position:relative
}

无法将div放在图像上

3 个答案: