HTML / CSS - отображение текста над тегом img - PullRequest
Новая
       9

HTML / CSS - отображение текста над тегом img

2 голосов
/ 20 сентября 2011

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

<div>
    <div id="leftDiv" style="float:left; width:49%; height:400px; background-color:transparent">
        <div style="position:relative; left:61px; top:100px; width: 319px; z-index:1">This is text</div>
        <div style="position:relative; left:61px; top:100px; width: 319px; z-index:1">This is also text</div>
        <img id="leftImg" alt="Images/redbox.png"
            style="width:100%; height:100%; z-index:-1; right: 1124px; top: 9px;" 
            src="Images/redbox.png" />

    </div>
    <div id="rightDiv" style="float:left; width:49%; height:400px; background-color:transparent">
        <img id="rightImg" src="Images/bluebox.png" alt="Images/bluebox.png" style="width:100%;height:100%; z-index:-1;" />
    </div>
</div>

Это все замечательно, за исключением одной мелочи ... Левый div, redbox.png, всегда уменьшается на количество s, которое я хочу в нем (или любое место, занимаемое элементами). Я мог бы разместить элементы после изображения, но действительно проще разместить их там, где я хочу, и сохранять их на месте, когда я анимирую коробки.

Теперь, почему я использую изображения вместо background-img? Что ж, я хочу, чтобы изображения автоматически изменяли размеры на окружающие <div> s, и это единственный способ, который я нашел, это сделать легко (изменение размера вручную с помощью javascript - вариант, но сложный в этом, поскольку поля будут анимированными ).

Есть идеи? Спасибо!

Ответы [ 3 ]

5 голосов
/ 20 сентября 2011

Вы должны использовать position:absolute вместо position:relative, чтобы вывести элемент из потока.Однако вам необходимо настроить левый и верхний атрибуты.

http://jsfiddle.net/3fJcR/1/

<div>
    <div id="leftDiv" style="float:left; width:49%; height:400px; background-color:transparent; position: relative">
        <div style="position:absolute; left:61px; top:50px; width: 319px; z-index:1">This is text</div>
        <div style="position:absolute; left:61px; top:64px; width: 319px; z-index:1">This is also text</div>
        <img id="leftImg" alt="Images/redbox.png"
            style="width:100%; height:100%; z-index:-1; right: 1124px; top: 9px;" 
            src="Images/redbox.png" />

    </div>
    <div id="rightDiv" style="float:left; width:49%; height:400px; background-color:transparent; position: relative">
        <img id="rightImg" src="Images/bluebox.png" alt="Images/bluebox.png" style="width:100%;height:100%; z-index:-1;" />
    </div>
</div>
0 голосов
/ 03 февраля 2014

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

<img scr="" alt="text"/>

<style>
.img{background-image:url('IMAGE_URL'); }
</style>
0 голосов
/ 20 сентября 2011

Вы можете иметь position:absolute для упаковки div и position:absolute для внутреннего наложения. Тогда внутренний абсолют относится к внешнему абсолютному элементу, а не к телу.

Посмотрите на этот пример, чтобы понять, что я говорю:

http://jsfiddle.net/mohsen/TbkjK/7/

...