如何在 HTML 中将文本添加到图像填充？

Question

我正在尝试在 HTML 文件中添加图像顶部和底部的文本。它应该是白色文本并进入 padding-top 和 padding-bottom，但我不确定如何将它添加/对齐到我的黑色填充。我想理想地使用 HTML，避免 CSS，但如果需要可以使用。

例如，我有一个带有黑色填充的图像，并且想将“CLICK HERE”添加到底部填充，类似地，添加到顶部，例如“小猫”

<div><img style="background-color: black; padding-left: 10px; padding-bottom: 50px; padding-right: 10px; padding-top: 30px; float: right;"src="https://www.sciencenews.org/sites/default/files/2019/07/main/articles/072319_ee_cat-allergy_feat.jpg" alt="Kittens"; width="150" height="100" /></div>

<p><a href = "https://www.sciencenews.org">CLICK HERE</a></p>

Answer 1

有很多方法可以回答您的问题，请查看下面给出的代码。

div{
background-color: black; 
padding-left: 10px;
padding-bottom: 50px; 
padding-right: 10px; 
padding-top: 30px; 
float: right; 
text-align: center;
}
a{
text-decoration:none;
color:white;
}

<div >

    <img src="https://www.sciencenews.org/sites/default/files/2019/07/main/articles/072319_ee_cat-allergy_feat.jpg" alt="Kittens"; width="150" height="100" />
    <br/><br/>
   <a  href = "https://www.sciencenews.org">CLICK HERE</a>

</div>

.box-card {
  float:right;
  background-color:black;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 150px;
  
}
.container {
  padding: 2px 10px;
}
p,div{
text-align:center;
}
a{
 text-decoration:none;
 color:white;

  }

<div class="box-card">
<div class="container">
    <p> </p> 
  </div>
  <img src="https://www.sciencenews.org/sites/default/files/2019/07/main/articles/072319_ee_cat-allergy_feat.jpg"  style="width:80%">
  <div class="container">
    <p><a href = "https://www.sciencenews.org">CLICK HERE</a></p>

  </div>
</div>

.box-card {
  background-color:black;
  float:right;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 150px;
}
.box-card{
padding:12px;
}
.container {
  padding:3px 8px;
}
p,div{
text-align:center;
}
a{
text-decoration:none;
color:white;
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="box-card">
<div class="container">
    <p> </p> 
  </div>
  <img src="https://www.sciencenews.org/sites/default/files/2019/07/main/articles/072319_ee_cat-allergy_feat.jpg"  style="width:100%">
  <div class="container">
    <p><a href = "https://www.sciencenews.org">CLICK HERE</a></p>
  </div>
</div>

Answer 2

而不是将样式放在img标签中，而是将它们放在父div_中

像这样：

<div style="background-color: black; padding-left: 10px; padding-bottom: 50px; padding-right: 10px; padding-top: 30px; float: right; text-align: center;">
    
    <span style="color: #FFFFFF;">Some Other Text</span>
    <br />
    <img src="https://www.sciencenews.org/sites/default/files/2019/07/main/articles/072319_ee_cat-allergy_feat.jpg" alt="Kittens"; width="150" height="100" />
    <br />
    <span><a style="color: #FFFFFF;" href = "https://www.sciencenews.org">CLICK HERE</a></span>

</div>

注意：

我还在<div> 样式中添加了text-align: center; _

和color: #FFFFFF; 的样式到<a> 标签