Question

我需要在basic-b1.png和basic-b2.png上覆盖文本和图像。我将如何实现这一点，以便轻松准确地定位文本和图像？

我确实了解当div元素中只有一个图像时如何在图像上添加文本。但是，当有两个图像并且它们都必须彼此居中对齐时，我无法将图像分成不同的div元素。

CSS：

   .bun{
         text-align:center;
         position:relative
      }

HTML：

   <div class="bun">
        <img src="basic-b1.png" height ="320" width ="212"> 
        <span style="padding-left:200px"></span>
        <img src="basic-b2.png" height ="320" width ="212">
   </div>

Answer 1

在这种情况下通常使用:: hover选择器

HTML：

<div class="bun">
        <img src="https://images.unsplash.com/photo-1538497508301-aa6452af8400?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=ca19176e4dc2bcc9269edf74c9c10d4f" height ="320" width ="212"> 
        <img src="https://images.unsplash.com/photo-1521624928109-a794da7909a9?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=48e97751d49c36e90b877ab2bbe27c3e" height ="320" width ="212">
   </div>

Css：

.bun{
         text-align:center;
         position:relative
}

.bun::before {
  content: 'hi there';
  color: yellow;
  position: absolute;
  font-size: 40px;
  left: 40%;
  top: 40%;
}

您可以执行content: 'url(...)'来放置图像而不是文本。如果每个img需要不同的img /文本，则必须将它们包装在另一个div中，然后将:: before选择器放在这些div上，因为img标签不接受:: before。

使用html在图片上添加文字-div元素中包含多张图片？

1 个答案: