Question

好的，所以这可能会让CSS / HTML处理得太复杂，但我也可以问。

我使用here中的代码生成一些动态放置的图像我想要添加到这些图像的是具有透明背景的文本覆盖类似于this。

我认为问题与浮动图像有关。也可能是我的图像也是链接的事实。我尝试了很多变化和指南，但似乎无法弄清楚为什么它不起作用。我不关心具有不透明度的图像，我不认为这会影响事物。当前代码获取图像旁边的文本。可以看到示例here。

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

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

如果将不透明度应用于保存背景图像的容器，并且主要内容区域在其后面是白色，并且您将不透明度应用于保持带有非褪色文本的跨度的h2背景，则效果会在两个不透明度中丢失。文字是白色的，所以它似乎也消失了。对于定位，我想知道上述链接是否适合您。：）

Answer 2

css-tricks.com上的一些人帮我解决了问题;

Solution

将文本重叠在图像链接上的问题

2 个答案: