如何使用 css 在标题下添加图片？

Question

我想使用 pure css 将标题下的图像准确添加为下面的链接图像。在哪里可以找到类似的图片？

以及如何定位边框？

边框之间有space，向下移动了一点。

使用 css 作为第二张图片的 img 标签：

img.profile {
    display: flex;
    margin: 0 auto;
    justify-content: center;
    width: 8rem;
    height: 8rem;
    border-width: 4px;
    border-radius: .75rem;
   border-color: rgba(156,163,175,var(--tw-border-opacity));
    background-color: rgba(229,231,235,var(--tw-bg-opacity));
}

Answer 1

纯HTML / CSS，我就照着做。

对于图像，使用 flex 来获得您想要的对齐方式。对于边框，使用不带任何模糊的box-shadow来控制边框的偏移量，使用border-radius来获得圆角。

HTML

<div class="container">
  <h1>About us</h1>
  <img src="https://cdn.pixabay.com/photo/2020/06/19/17/41/divider-5318234_1280.png">
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus sem ut orci varius rhoncus. Sed eu pulvinar enim. Vivamus egestas ac nisi quis semper. Nam pulvinar erat in rutrum scelerisque. Maecenas ac lectus ultricies, pretium mi in, bibendum urna. Aenean tempus aliquam leo ac dignissim. Maecenas sed porta velit. Cras ut nunc sit amet erat sagittis convallis vitae quis ante.
  </p>
</div>

CSS

.container {
  /* Flex properties */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  /* Border properties */
  box-shadow: -5px 5px 0px black; /* x-offset | y-offset | blur to 0 | color */
  border-radius: 10px; /* border-radius to get a curvy border */
  
  width: 500px;
  padding: 10px;  
}

.container > h1 {
  margin-bottom: 0px; /* Remove the space between title and img */
}

.container > img {
  max-width: 70%;
  height: 50px;
}

和工作 fiddle

如何使用 css 在标题下添加图片？

How can I add image under title using css?

css

title

background-image