наложение текста с разными стилями поверх изображения, предотвращение отображения текста одного стиля поверх текста другого стиля

Question

наложение текста с разными стилями поверх изображения, предотвращение отображения текста одного стиля поверх текста другого стиля

0

Я знаю, как разместить текст поверх изображения, но когда этот текст содержит разные классы, разные стили текста, текстовые строки перекрывают один поверх другого.

Вот простой 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;
}

Любая идея, как я могу получить сложный текст с разными стилями текста, чтобы накладываться на изображение? о_О

Karpov 24 окт. 2013, в 10:22

Источник

Теги:

html

css

1 ответ

Ещё вопросы

Tomer · Accepted Answer · 2013-10-24T05-42-00.000Z

Причина, по которой они перекрываются, состоит в том, что они имеют одинаковое расположение:

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>