출처: https://stackoverflow.com/questions/68255008/tailwind-css-text-over-image-problems
Tailwind CSS text over image problems
I'm trying to code as below https://play.tailwindcss.com/5x8mBABcsW How I can place the text over the circle image? I need the text centered and rounded on the bottom of the image. I also want to b...
stackoverflow.com
예제처럼 배치하는 방법
<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>
relative, object-cover, absolute, bottom-0, inset-x-0
이것들이 핵심인 듯...
* truncate: 넘치는 문자열 "..." 으로 바꿔줌.
글 쓰고 보니, 333 달성..ㅋㅋㅋ
따로 기념하기도 모하고..-0-;
여기에 남기자.
'개발일지' 카테고리의 다른 글
| vite react typescript + graphql code generator 적용하기 (0) | 2023.01.03 |
|---|---|
| tailwindcss 적용하기 (0) | 2021.11.08 |
| 리눅스 안드로이드 스튜디오 한글입력 문제 해결법 (0) | 2021.10.19 |
| Dartlang class에 Object를 argument로 넘겨주기 (0) | 2021.06.20 |
| 뒷 배경에 이미지를 포함한 위젯 만들기 (0) | 2021.06.15 |
