Проблемы с наложением текста на ссылку на изображение

Question

ОК, поэтому это может быть слишком сложно для CSS / HTML, но я также могу спросить.

У меня есть несколько динамически размещенных изображений, использующих код из здесь .
Я хотел бы добавить к этим изображениям текстовое наложение с прозрачным фоном.
Что-то вроде this .

Я думаю, что проблема связана сплавающие изображения.Также возможно тот факт, что мои изображения также являются ссылками.Я перепробовал много вариантов и руководств, но просто не могу понять, почему это не работает.Меня не волнует непрозрачность изображений, я не думаю, что это влияет на вещи.Текущий код получает текст рядом с изображением.Пример можно увидеть здесь .

HTML;

<div id="internal">
    <div id="row2">
        <a href="studies.php"><img src="images/gallery/studies/STUDY1.jpg" width="200" height="200" alt="Studies Gallery"/></a><h2><span>Some text.</span></h2>
        <div id="movers-row2">
            <div><a href="mediaunits.php"><img src="images/gallery/mediaunits/media1.JPG" width="200" height="200" alt="Media Units Gallery"/></a></div>
            <div><a href="freestandingfurniture.php"><img src="images/gallery/freestandingfurniture/furniture1.JPG" width="200" height="200" alt="Furniture Gallery"/></a></div>
        </div> <!-- end #movers -->
    </div> <!-- end #row -->
    <div style="clear: both;"></div>
</div> <!-- end #internal -->

CSS;

#internal
{
    width: 958px;
    height: auto;
    background-color: white;
    border: 1px solid #ccc;
}

#row2 {
    min-width: 480px;
    display: block;
    border: 0px;
}

#row2 a img {
    position: relative;
    background-color: black;
    opacity: 0.7; /* transparent */
    filter:alpha(opacity=70); /* IE transparent */
}

#row2 h2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    float: left;
}

#row2 span {
    color: white;
    font: bold 24px Helvetica;
    letter-spacing: -1px;
    background: rgba(0, 0, 0, 0.7);
    padding: 10px;
}

#movers-row2 {
    margin: -204px 0 0 200px;
    height: auto;
    overflow: hidden;
}

#movers-row2 div {
    width: 49.9%;
    float: left;
}

#movers-row2 div img {
    float: right;
} 

Answer 1

Некоторые люди на css-tricks.com помогли мне с решением;

Раствор

Answer 2

http://dl.dropbox.com/u/7573777/z_working-folder/stacko.html

Если вы примените непрозрачность к контейнеру, в котором находится фоновое изображение, а основная область содержимого за ним белого цвета, и вы примените непрозрачность к фону h2, который содержит интервал с нецветным текстом, эффект теряется в двух помутнениях.Текст белый, поэтому кажется, что он тоже блеклый.Для позиционирования мне интересно, будет ли работать вышеуказанная ссылка для вас.:)