Question

我知道如何在图像上放置一些文本，但是当该文本包含不同的类，不同的文本样式时，文本行重叠在另一个上面。

这是一个简单的html代码，只有一种文字样式可以使用：

<li style="" class="portfolio-content-CV">
    <div class="contentCV"><img src="images/backgr.png" height="500" width="510">
        <p class="auto-style2"><span lang="es">yada yada</span></p>
    </div>
</li>

以下代码不起作用：

<li style="" class="portfolio-content-CV">
<div class="contentCV"><img src="images/backgr.png" height="500" width="510">
        <p class="auto-style2"><span lang="es">yada yada</span></p>
        <p class="auto-style1"><span lang="es">bla bla bla</span></p>
    </div>
</li>

css格式如下：

#portfolio-list .portfolio-content-CV a{
    width: 510px;
    float: left;
    height:500px;
    display:?table;
    border:0.5px solid grey;
}

.contentCV {
    width: 510px;
    position: relative;
    float: left;
    cursor: pointer;
    padding: 0px 0px 0px 0px;
    background: #FFF;
    border: 0px solid #E2E2E2;
    margin-right: 10px;
    margin-bottom: 10px;
    display:table-cell;
    vertical-align:bottom;
}

.contentCV a.titlesmall {   display: none; }

.auto-style2 {
    margin-left: 20px;
    font-family: "AGENCYR";
    font-size: 0.5em;
    position: absolute;   
    top: 6px; 
    left: -8px; 
    width: 100%;
    color: #000000;
}

.auto-style1{
    margin-left: 16px;
    font-family: "AGENCYR";
    font-size: 0.5em;
    position: absolute;   
    top: 6px; 
    left: -8px; 
    width: 100%;
    color: #000000;
}

任何想法如何获得具有不同文本样式的复杂文本以在图像上重叠？ O_O

Answer 1

它们重叠的原因是因为它们具有相同的定位：

top: 6px; 
left: -8px;

和绝对定位的元素倾向于彼此重叠。

因此，您可以创建一个div包装器并将p标签放入其中：

<div class="textWrapper">
   <p class="auto-style2"><span lang="es">yada yada</span></p>
   <p class="auto-style1"><span lang="es">bla bla bla</span></p>
</div>

的CSS：

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

确保从<p>标记中移除绝对位置

在图像上重叠具有不同样式的文本，防止一种样式的文本显示在另一种样式的文本之上

1 个答案: