Question

我无法用文字描述这一点，所以我会给你看图片。

以下是我的设计师打算在我们网站的侧边栏中查看Gravatar图片的方式：

how the designer wants it http://i41.tinypic.com/rjnn6v.png

这是我制作的叠加图像（从Photoshop截屏）：

my overlay image http://i43.tinypic.com/s1sz2e.png

以下是它现在的样子......

not quite ideal http://i42.tinypic.com/21j13s3.png

不太理想，我想你会同意的。这是我正在使用的CSS代码：

.gravatarsidebar {
    float:left; 
    padding:0px;
    width:70px;
}

.gravataroverlay {
 width:68px;
 height:68px;
 background-image: url('http://localhost:8888/images/gravataroverlay.png');
}

这里是XHTML（以及根据用户的电子邮件地址获取Gravatar的PHP，这是从我们的数据库中提取的）：

<div class="gravataroverlay"></div>

        <div class="gravatarsidebar">
            <?php $gravatar_link = 'http://www.gravatar.com/avatar/' . md5($email) . '?s=68';
            echo '<img src="' . $gravatar_link . '" alt="Gravatar" />'; ?>  
        </div>

那我该怎么办？ 我无法使用相对定位，因为它会使下面div中的“搜索”一词保持向右移动。

感谢您的帮助！

杰克

Answer 1

您是否尝试使用z-index强制覆盖两个图像？也许是这样的？ Here is a pseudo example

<div class="gravatar-sidebar">
     <img class="overlay-image" src="images/gravataroverlay.png" />
     <?php $gravatar_link = 'http://www.gravatar.com/avatar/' . md5($email) . '?s=68';
     echo '<img src="' . $gravatar_link . '" alt="Gravatar" class="gravatar-image"/>'; ?>
</div>

/*CSS*/
.gravatar-sidebar {float:left;padding:0px;width:70px;position:relative;}
img.overlay-image{position:absolute;left:0px;top:0px;z-index:10;}
img.gravatar-image{position:absolute;left:0px;top:0px;z-index:1;}

Answer 2

你不能用相对定位在哪里？在重力图像？

我不得不想知道为什么你的叠加div在图像本身的容器之外。至少他们应该是兄弟姐妹。制作一个仅容纳图像和叠加层的容器，然后将叠加层设置为0,0绝对位于图像顶部。

    <div class="gravatarsidebar">
        <?php $gravatar_link = 'http://www.gravatar.com/avatar/' . md5($email) . '?s=68';
        echo '<img src="' . $gravatar_link . '" alt="Gravatar" />'; ?>
        <div class="gravataroverlay" style="position:absolute; top:0; left:0;"></div>  
    </div>

CSS - 将一个图像叠加在另一个图像之上

2 个答案: