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

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

 x(1).i <= x(5)
 x(2).i <= x(5)
 x(3).i <= x(6)

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

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

Answer 2

.icon1很有意思。

.icon2不那么花哨。

fit-content是一个鲜为人知的属性，非常便于将元素放在内容上。见ARTICLE

icon2的属性是基本的。

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

修改

如果你的意思是里面的图片填充意味着有点像文字叠加在图像上，那么试试.icon3。它使用position属性。见ARTICLE。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;