时间戳

首页 > 解决方案 > 在图像中放置文本

html - 在图像中放置文本

问题描述

<head>
<style>
.relative{position:relative; width:600px;}
.absolute-text{position:absolute; bottom:1; font-size:12px; font-family:"vedana"; background:rgba(251,251,251,0.5);
padding:10px 20px; width:10%; text-align:center;}


</style>
</head>
<body>

<div class="relative">
	<img src="Chttps://i.stack.imgur.com/Ss3PX.jpg">
		<p class="absolute-text">16<br>august</p>
</div>

                                          

</body>

我有一张图片，并希望使用 html 和 css 在该图片的按钮左角中添加一些文本......
这是一个看起来像这样的图片：

在此处输入图像描述

我试了很多次，还是没有。。

标签： htmlcsscss-position

解决方案

您必须使用 css position absolute 和 position relative。使父相对和子相对。 

.container {
    position: relative;
    text-align: center;
    color: white;
}

.bottom-left {
    position: absolute;
    bottom: 8px;
    left: 16px;
}

.top-left {
    position: absolute;
    top: 8px;
    left: 16px;
}

.top-right {
    position: absolute;
    top: 8px;
    right: 16px;
}

.bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
<h2>Image Text</h2>
<p>How to place text over an image:</p>

<div class="container">
  <img src="https://www.w3schools.com/w3images/hamburger.jpg" alt="Snow" style="width:100%;">
  <div class="bottom-left">Bottom Left</div>
  <div class="top-left">Top Left</div>
  <div class="top-right">Top Right</div>
  <div class="bottom-right">Bottom Right</div>
  <div class="centered">Centered</div>
</div>

推荐阅读