html - 如何在图像上制作一条短的水平线？

Question

我想在图像上画一条短的水平线。就像引号后跟水平线后跟作者姓名一样。下面是我正在尝试做的一个例子。

如何在 html css 中实现这一点？

Answer 1

您可以使用带边框的 hr 或 div。我做了一个简单的例子，希望对你有帮助。

html, body{
 height: 100%
}

body{
 background: lightslategray;
 display: flex;
 justify-content: center;
 align-items: center;
 margin: 0;
}

.quote {
  background: url('http://lorempixel.com/g/600/200/abstract/?random=true');
  color: white;
  background-size: cover;
  padding: 2rem;
  text-align: center;
}

hr {
  width: 40%;
}

<div class="quote">
  <h1>A dream doesn't become reality through magic<br/> it takes sweat, determination and hard work.</h1>
  <hr />
  <h2>Colin Powell</h2>
</div>