Question

我有两张图片，一张在左边，另一张在右边。我正面临着在两个图像上写文字的问题。我正在粘贴HTML代码和CSS代码。请更正它。

HTML代码

 <div id="header">
        <img src="images/banner-img1.jpg"alt="" class="left" > <p id="text"> jhcjdhdjshdjdhjd</p>
        <img src="images/banner-img2.jpg"alt="" class="right"><p id="text"> jgdhdgdhddhhsd </p>

    </div>

CSS代码是

#container {
    height: 400px;
    width: 400px;
    position: relative;
}
#image {
    position: absolute;
    left: 0;
    top: 0;
}
#text {
    z-index: 100;
    position: absolute;
    color: white;
    font-size: 24px;
    font-weight: bold;
    left: 150px;
    top: 600px;
}

Answer 1

您的两个段落都引用相同的ID，但ID必须是唯一的。请尝试在此处使用课程。

Function Get-FileMetaData {

    Write-Output ([PSCustomObject]@{Value="this function is executed"}) | Out-String

}

Write-Output "Before function execution"
Get-FileMetaData
Read-Host "Press ENTER to continue"

和

.text { 
   ...
}

此外，您在图片代码上使用<p class="text"> ... </p>和class="left"，但这些类在您的css代码中尚未存在。

Answer 2

为图像创建一个容器，并使其相对位置。（与页面的其余部分相处）将图像放在容器中。将文字直接放在容器内图片下方，并使其处于绝对位置（以将文字覆盖在图片上），然后根据需要放置。最后，添加一些CSS技巧以适合您的需求。

在图像上写文字。面临错误

2 个答案: