css 如何使一个化身出现在顶部和超过边缘的背景元素在脉轮用户界面？

3ks5zfa0 于 2023-03-20 发布在其他

关注(0)|答案(1)|浏览(109)

在这种情况下，一张图片绝对胜过千言万语。
我想达到的目标可以用下图来最好地描述。

因此，有一个彩色背景上的头像，但它应该看起来像它的边缘。
我在React中使用Chakar-UI中的Card组件，代码如下所示

import * as React from 'react';
import {Card, CardBody, CardHeader, Text, Avatar} from '@chakra-ui/react'

...

// in the react component return the following JSX:

<Card width="400px">
   <CardHeader backgroundColor="auditorCard.headerBg1" p={4} zIndex="1">
     <Avatar src='https://link-to-profile.jpg'/>
   </CardHeader>
  <CardBody>
     <Text>Body</Text>
  </CardBody>
</Card>

请问我如何利用CSS/ChakarUI来实现这一点？

css

来源：https://stackoverflow.com/questions/75730486/how-to-make-an-avater-appear-on-top-and-over-the-edge-of-a-background-element-in

1条答案

按热度按时间

velaa5lx1#

你需要给予阿凡达一个绝对的位置，并把它放在离顶部一定距离的地方，这样你就可以得到你想要的外观。

.avatar{
  position:absolute;
  top: 2em; /* Or every other quantity that gaves you the desired design */
}

在ChakarUI上，我认为它会是这样的：

<Avatar position="absolute" top="2em" src='https://link-to-profile.jpg'/>

赞(0）回复(0）举报 2023-03-20

我来回答

css 如何使一个化身出现在顶部和超过边缘的背景元素在脉轮用户界面？

1条答案

相关问题

热门标签

最新问答