在 Chrome 中，我的文字隐藏在我的背景图片后面答案

【问题标题】：In Chrome, my text is hidden behind my background image在 Chrome 中，我的文字隐藏在我的背景图片后面
【发布时间】：2011-08-15 18:59:20
【问题描述】：

http://codepopper.com/leon/health/

你好！希望对此有所帮助...如果您在 FireFox 中查看上面的链接，您将能够看到每个绿色行中的文本。但是在 Chrome 中，由于某种原因，文本被隐藏了，我玩过 Z-index，但我还缺少其他东西吗？

HTML：

<!-- Video Row 1 -->
<div class="row">
    <img src="images/thumb1.png" alt="Top five tips, facts, myths, and heartburn treatments."/>
    <div class="copyBox">
        Top five tips, facts, myths, and heartburn treatments.
            <img class="float_right" src="images/play_button.png" />
    </div>

</div>

CSS：

.row {
    float:left;
    width:300px;
    height: 60px;
    background: url(../images/tile_row.jpg) repeat-x;
    clear: none;
    z-index: -1;
}

.copyBox {
    float:right;
    text-align: left;
    width: 192px;
    height: 60px;
    font-family: arial;
    font-size: 12;
    left: 5px;
    top: 5px;
    z-index: 1;
}

【问题讨论】：

标签： html css image google-chrome background-image

【解决方案1】：

您需要将 .copyBox 上的宽度减小到 ~190 像素。文本被推出容器。此外，您可以删除 z-index，因为它仅适用于定位元素，您应该为您的字体大小指定单位 :)

【讨论】：

哇，谢谢！修复了它：D 无法相信 Chrome 对 2 像素那么挑剔。另一个快速问，我如何将播放按钮对齐到右下角？
我要添加和修改以下规则：.copyBox { position:relative; } img.float_right { position:absolute; top:28px; left:100px; } 设置 .copybox 的相对位置可以让里面的所有东西都能按照你想要的方式定位。