时间戳

首页 > 解决方案 > 如何使用 HTML 将文本和图像放置在形状内？

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

问题描述

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

标签： htmlcssimagetextshapes

解决方案

您可以以此为起点：

<!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

推荐阅读