HTML + CSS-使圖像元素成為父元素？

Question

我知道這似乎是一個新問題，但是是否可以將圖像元素設置為父元素？ 如果是這樣，我該怎么辦？

以下是我要尋找的示例：

另外，我不能僅將div元素作為父元素的原因是我想要相對於該圖像元素的文本元素，而不是div元素。 這樣，我可以使文本相對於圖像居中。 在此先感謝您的幫助！

Answer 1

看來我已經解決了。 我開始搞砸一些價值觀，我明白了。

HTML：

<div id="main-div">
    <img id="image" src="url.com/image.png">
    <h1 id="text">Caption</h1>
</div>

CSS：

#main-div {
  position: absolute;
  top: 30px;
  left: 50%;
  margin: 0px auto;
  transform: translate(-50%, 0);
}

#image {
  position: absolute;
  top: 130px;
  left: 50%;
  margin: 0px auto;
  transform: translate(-50%, 0);
  color: white;
  font-family: "Roboto";
  text-align: center;
}

#text {
  position: absolute;
  top: 30px;
  left: 15%;
  margin: 0px auto;
  transform: translate(-50%, 0);
  display: block;
  border: thin red solid;
}

這是代碼的JS小提琴和最終結果： https : //jsfiddle.net/k3b70Lg7/

Answer 2

不，您不能，因為圖像元素已被替換。

但是，您可以將圖像和文本元素包裝在另一個div並將其定位。

<div class="outer-black">
   <div class="inner-image-text-wrapper">
       <img src="..">
       <div class="text"></div>
   </div>
</div>

現在將包裝器設置為內聯文本意味着它會根據內容（ 圖像 ）展開，並且還將包裝器也設置為position:relative ，則可以將文本（ position:absolute ）放置在其中的任何position:absolute 。

---

完整的例子

 .outer-black { background: black; padding: 2em; } .inner-image-text-wrapper{ position:relative; display:inline-block; } .inner-image-text-wrapper img{display:block;} .inner-image-text-wrapper .text{ position:absolute; top:105%; left:5%; right:5%; text-align:center; background:rgba(255,255,255,0.5); } 

 <div class="outer-black"> <div class="inner-image-text-wrapper"> <img src="http://lorempicsum.com/simpsons/300/200/1"> <div class="text">image caption</div> </div> </div>