如何在图像的填充内添加文本

Question

是否可以在图像的填充内添加文本。这是我的代码。文本显示在图像的填充下方。

HTML

 <div>
 <img class="icon" src="Computer Icon.png" height="145">
 <p>Simple HTML Websites</p>
 </div>

CSS

 .icon {
 padding: 40px 80px 220px;
 background-color: #afafaf;
  }

Answer 1

.image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

h2 { 
   position: absolute; 
   top: 150px; 
   width: 100%; 
   text-align:center;
   vertical-align: middle;
   line-height: 
}

<div class="image">

      <img src="http://images.all-free-download.com/images/graphiclarge/flower_bouquet_leaf_221397.jpg" alt="" />
      
      <h2>A Movie in the Park:<br />Kung Fu Panda</h2>

</div>

Answer 2

.icon1 很花哨。

.icon2 没那么花哨。

fit-content 是一个鲜为人知的属性，它对于在内容上拟合元素非常方便。参见 ARTICLE

icon2 的属性是基础。

使用figure和figcaption代替div和p没有区别。您会得到相同的结果，但使用前者更具语义。

编辑

如果您的意思是 图像内部填充 意思是有点像叠加在图像上的文本，那么请尝试 .icon3。它利用 position 属性。参见 ARTICLE。

.icon1 {
  height: auto;
  width: 165px;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  background-color: #afafaf;
  font: 400 16px/1.4'Source Code Pro';
  font-variant: small-caps;
  padding: 10px;
  border: 1px solid #103683;
  border-radius: 20px;
}
.icon2 {
  height: auto;
  width: 160px;
  background-color: #afafaf;
  padding: 10px;
}
.icon3 {
  position: relative;
  height: 145px;
  width: 160px;
  background-color: #afafaf;
  padding: 10px;
}
.icon1 img,
.icon2 img {
  display: block;
  margin: auto;
}
.icon3 img {
  position: absolute;
  left: calc(50% - 72.5px);
  z-index: 1;
}
.icon1 figcaption,
.icon2 figcaption {
  margin: 0 auto;
  text-align: center;
}
.icon3 figcaption {
  position: absolute;
  margin: 0 auto;
  text-align: center;
  z-index: 2;
  bottom: 10px;
}

<figure class="icon1">
  <img src="https://pixabay.com/static/uploads/photo/2013/07/12/15/53/workstation-150503_640.png" height="145" width="145">
  <figcaption>Simple HTML Websites</figcaption>
</figure>

<figure class="icon2">
  <img src="https://pixabay.com/static/uploads/photo/2013/07/12/15/53/workstation-150503_640.png" height="145" width="145">
  <figcaption>Simple HTML Websites</figcaption>
</figure>

<figure class="icon3">
  <img src="https://pixabay.com/static/uploads/photo/2013/07/12/15/53/workstation-150503_640.png" height="145" width="145">
  <figcaption>Simple HTML Websites</figcaption>
</figure>

如何在图像的填充内添加文本

How to add text inside the padding of an image

padding