Question

图中的

是我的代码，我将添加什么来制作＆＃34; Lanlan的晚餐＆＃34;在background1.jpg上显示？此代码是教科书中关于如何在标题下添加背景img的内容。但是在这段代码中，只有图片显示，标题没有显示。谢谢

Answer 1

你可以这样。将标题放在div中，并按照建议将div的背景设置为图像。然后将标题的位置设置为相对，并能够调整图像上的文本位置。

我认为这就是你想要的？这真的不需要js。

＆＃13;

.header {
  background: url(http://via.placeholder.com/200x50) no-repeat;
  font-size: 14px;
  width: 200px;
  height: 50px;
  
}
.header h1 {
  position: relative;
  top: 20px;
  left: 2px;
}

＆＃13;

<div class="header">
  <h1>
    Hello, world
  </h1>
</div>

＆＃13;

Answer 2

要将图像作为背景，请使用background-image CSS属性（或background属性）。请注意关联的background-*属性，其中许多属性对于排列图像非常有用（例如，我使用下面的background-repeat，因此它不会对元素进行平铺）。

＆＃13;

h1 {
  background: url(http://via.placeholder.com/200x50) no-repeat;
}

＆＃13;

<h1>
  Hello, world
</h1>

＆＃13;

Answer 3

如果我们使用以下代码怎么办？

<figure>
  <img
  src="http://via.placeholder.com/200x50"
  alt="An awesome picture">	
  <figcaption>Text below the image.</figcaption>
</figure>

对于这些类型的情况，

<figcaption>为recommended，因此您应该使用它。

编辑;既然问题是，如何在标题上方添加背景图片，请按以下步骤操作：

<figure>
      <figcaption>Text above the image.</figcaption>
      <img
      src="http://via.placeholder.com/200x50"
      alt="An awesome picture">	
</figure>

Answer 4

您在alt属性中添加的内容是替代文字。显示图像是否未加载（尚未加载或根本不加载）。它也被搜索引擎用来理解＆＃34;图像中有什么。

如果您想在页面上显示文字，则必须将该文字放在h1标记内：

<h1><img src="image.jpg">your title</h1>

然后应用一些样式以根据需要显示：

＆＃13;

h1{
  position:relative;
}

h1 .title{
  position: absolute;

/*set that values to position your title, you can also use right and bottom, regarding on how you want to place your title */
  left: 0;
  top:0;
}

＆＃13;

<br/>
<br/>
<br/>
<h1> 
  <img src="https://via.placeholder.com/200x50"/>
  <span class="title">your title</span>
</h1>

＆＃13;

Answer 5

如果你想在html中的图片上显示标题，你必须做点什么：<img src="images/background1.jpg" alt="Lanlan's Dinner" title="Lanlan's Dinner" width="700" height="700" />。 ALT属性用于在未显示图像时显示值。

最佳， thanhnt

如何在html中的背景img上添加标题

5 个答案: