图片上显示半透明文字①

文本内容

小文字内容

文本居中：

<div style="position:relative; display:inline-block;">
<img src="https://files.getquicker.net/_sitefiles/_guides/66ac708c-895b-40bc-6d9c-08da16da9c3c/2023/09/05/144437_202824_0.jpg" width="500" height="270">
<div style="position:absolute; top:50%; left:0; right:0; transform:translateY(-50%); background-color:rgba(0, 0, 0, 0.5); color:#fff; padding:10px; text-align:center;">
<span style="font-weight: bold; font-size:30px">文本内容</span>
<div style="font-size: 12px; margin-top: 5px;">小文字内容</div>
</div>
</div>

瓜皮之牙

文本居下：

<div style="position:relative; display:inline-block;">
<img src="https://files.getquicker.net/_sitefiles/_guides/66ac708c-895b-40bc-6d9c-08da16da9c3c/2023/09/05/144437_202824_0.jpg" width="500" height="270">
<div style="position:absolute; top:100%; left:0; right:0; transform:translateY(-100%); background-color:rgba(0, 0, 0, 0.5); color:#fff; padding:10px; text-align:center;">
<div>瓜皮之牙</div>
</div>
</div>

瓜皮之牙

文本居上：

<div style="position:relative; display:inline-block;">
<img src="https://files.getquicker.net/_sitefiles/_guides/66ac708c-895b-40bc-6d9c-08da16da9c3c/2023/09/05/144437_202824_0.jpg" width="500" height="270">
<div style="position:absolute; top:0%; left:0; right:0; transform:translateY(-0%); background-color:rgba(0, 0, 0, 0.5); color:#fff; padding:10px; text-align:center;">
<div>瓜皮之牙</div>
</div>
</div>