我正在尝试编写以下代码 https://play.tailwindcss.com/5x8mBABcsW。
我该如何将文本放置在圆形图像上方?我需要文本在图像底部居中且呈圆形。同时,我也想能够增加图像的大小,而所有内容应保持成比例。
我该如何将文本放置在圆形图像上方?我需要文本在图像底部居中且呈圆形。同时,我也想能够增加图像的大小,而所有内容应保持成比例。
类似于这个
<div class="relative w-40 h-40 rounded-full overflow-hidden">
<img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar" class="object-cover w-full h-full" />
<div class="absolute w-full py-2.5 bottom-0 inset-x-0 bg-blue-400 text-white text-xs text-center leading-4">this is a text</div>
</div>
底部元素的高度由padding设置(但您可以使用height更改它),图像大小由父级的w-40 h-40
处理 - 您可以更改它们。
import React from 'react';
import hero from '../assets/img/hero-bg.jpg';
const Hero = () => {
return (
<div className='w-full h-screen'>
<img
className='top-0 left-0 w-full h-screen object-cover'
src={hero}
alt='/'
/>
<div className='bg-black/30 absolute top-0 left-0 w-full h-screen' />
<div className='absolute text-2xl md:text-7xl text-white top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
<p className='tex-red-700'>I am Morgan Freeman</p>
</div>
</div>
);
};
export default Hero;
<div class="relative w-40 h-40 overflow-hidden rounded-full">
<img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar" class="rounded-full w-full h-full" />
<div
class="absolute w-full py-3 bottom-0 inset-x-0 bg-blue-400 text-white text-xs text-center leading-4 hover:translate-y-1 delay-500">this is a text</div>
</div>
OR-
<div class="relative w-40 h-40">
<img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar" class="rounded-full w-full h-full" />
<div class="absolute w-full h-full top-0 left-0 rounded-full bg-blue-400 text-white text-xs flex justify-center items-center opacity-0 hover:opacity-90">this is a text</div>
</div>
我认为你可以尝试这段代码 - 另外,你需要更改或调整数值 -