如何使用 HTML 将文本和图像放置在形状内？答案

【问题标题】：How to place text and image inside a shape with HTML?如何使用 HTML 将文本和图像放置在形状内？
【发布时间】：2021-12-06 18:24:11
【问题描述】：

我正在尝试自学 HTML，但我一直坚持这一点。我基本上是在尝试将 Web 图像放在用 HTML 创建的纯黑色矩形之上。矩形的顶部和底部应有足够的空间放置文本，并与页面右侧对齐。理想情况下，它应该看起来像这样。 Example

【问题讨论】：

向我们展示你到目前为止所尝试的，也许我们可以缩小你现在和你想去的地方之间的差距
请拨打tour，阅读有关发布“minimal reproducible example”代码和“How to Ask.”的指南
请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

标签： html css image text shapes

【解决方案1】：

您可以以此为起点：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.card {
width: 200px;
background-color: #000;
color: #fff;
padding: 20px 40px;
}
a {
color: #fff;
}
h1 {
text-align: center;
padding-bottom: 20px;
}
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="card">
<h1>TEXT HERE</h1> 
<img src="https://via.placeholder.com/200" alt="image">
<h2>Some text with a <a href="https://example.com">link</a>.</h2>
</div>
</body>
</html>

延伸阅读：https://www.w3schools.com/howto/howto_css_cards.asp

【讨论】：