# 在封面上叠加头像

**URL:** <https://meta.discourse.org/t/overlaying-an-avatar-on-the-cover/292808>\
**Category:** Development\
**Created:** [2024年一月24日 17:53 UTC](https://meta.discourse.org/t/overlaying-an-avatar-on-the-cover/292808 "2024-01-24T17:53:51Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gonerdot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gonerdot/32/366307_2.png) [@Gonerdot](https://meta.discourse.org/u/Gonerdot)\
**Post date:** [2024年一月24日 17:53 UTC](https://meta.discourse.org/t/overlaying-an-avatar-on-the-cover/292808/1 "2024-01-24T17:53:51Z")

</div>

是否可以类似地将头像叠加在横幅上？如果可以，那么同时需要禁用隐藏横幅的功能

 ![image](https://global.discourse-cdn.com/meta/original/4X/5/0/7/507fa435e99c7c3cc92ae6ac0937a0d68b1871a1.jpeg)

---

<div class="post-metadata">

**Author:** ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)\
**Post date:** [2024年一月24日 18:47 UTC](https://meta.discourse.org/t/overlaying-an-avatar-on-the-cover/292808/2 "2024-01-24T18:47:42Z")

</div>

您可以尝试此 CSS？需要将其插入到您的主题或新的组件 CSS 中。

```css
.user-main:has(.has-background .user-profile-image) {
    $avatar_size: 144px;
    $avatar_margin: 20px;
    $avatar_border_size: medium;

    .user-profile-avatar {
        position: absolute;
        top: calc(-#{$avatar_size} / 2 - $avatar_margin);
        left: $avatar_margin;

        img.avatar {
            background: var(--secondary);
            border-width: $avatar_border_size;
        }
    }

    .primary-textual {
        margin-left: calc($avatar_size + $avatar_margin * 2);
    }
}

```

您的主题是什么？可能需要进行一些调整。

---

<div class="post-metadata">

**Author:** ![Gonerdot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gonerdot/32/366307_2.png) [@Gonerdot](https://meta.discourse.org/u/Gonerdot)\
**Post date:** [2024年一月24日 19:14 UTC](https://meta.discourse.org/t/overlaying-an-avatar-on-the-cover/292808/3 "2024-01-24T19:14:31Z")

</div>

FKB Pro 主题。  
如何在此处添加或更改 CSS？

 ![image](https://global.discourse-cdn.com/meta/original/4X/a/6/5/a657f94ca540e6ef9aa09dcff20122f19f936903.png)

---

<div class="post-metadata">

**Author:** ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)\
**Post date:** [2024年一月24日 19:19 UTC](https://meta.discourse.org/t/overlaying-an-avatar-on-the-cover/292808/4 "2024-01-24T19:19:41Z")

</div>

推荐的方法是创建一个新组件，将其附加到您的主题，然后您可以在其中“编辑 CSS/HTML”。 👍

![image](https://global.discourse-cdn.com/meta/original/4X/8/b/c/8bc0304fa0553a961d6ed408befe1a72d950b770.png)

 ![image](https://global.discourse-cdn.com/meta/original/4X/9/2/2/92241385892fe3a84a074817054d76bb635dfca6.png)

 ![image](https://global.discourse-cdn.com/meta/original/4X/3/0/2/302efa1f1b8c3b0a422c786f7c557bfca400af2e.png)

---

<div class="post-metadata">

**Author:** ![Gonerdot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gonerdot/32/366307_2.png) [@Gonerdot](https://meta.discourse.org/u/Gonerdot)\
**Post date:** [2024年一月24日 19:21 UTC](https://meta.discourse.org/t/overlaying-an-avatar-on-the-cover/292808/5 "2024-01-24T19:21:56Z")

</div>

谢谢！它正在工作

 ![image](https://global.discourse-cdn.com/meta/original/4X/1/a/a/1aa58d266531cd1d4494655626b1115197a37973.jpeg)  
但是，如果封面被隐藏，头像也不会显示。我该如何禁用隐藏封面的功能？  
 ![image](https://global.discourse-cdn.com/meta/original/4X/5/c/a/5ca1e3b9ed0172a17cd53f154e5fb49f161b1cc3.png)

---

<div class="post-metadata">

**Author:** ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)\
**Post date:** [2024年一月24日 19:30 UTC](https://meta.discourse.org/t/overlaying-an-avatar-on-the-cover/292808/6 "2024-01-24T19:30:53Z")

</div>

我已经更新了上面的 CSS，您可以再试一次吗？

在我这边看起来不错：

 ![image](https://global.discourse-cdn.com/meta/original/4X/1/2/9/129edb27784a47963c7dd89e468df617c5b7a653.jpeg)  
 ![image](https://global.discourse-cdn.com/meta/original/4X/d/1/e/d1e28b060cb9ca0b8facf33e025e830fa098b6a7.png)

---

<div class="post-metadata">

**Author:** ![Gonerdot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gonerdot/32/366307_2.png) [@Gonerdot](https://meta.discourse.org/u/Gonerdot)\
**Post date:** [2024年一月24日 19:33 UTC](https://meta.discourse.org/t/overlaying-an-avatar-on-the-cover/292808/7 "2024-01-24T19:33:41Z")

</div>

![image](https://global.discourse-cdn.com/meta/original/4X/8/6/b/86b65eacf531982c000501c5d13cd68d83c6664c.png)  
🥳

---

<div class="post-metadata">

**Author:** ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)\
**Post date:** [2024年二月23日 19:34 UTC](https://meta.discourse.org/t/overlaying-an-avatar-on-the-cover/292808/8 "2024-02-23T19:34:42Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.