728x90
[참고]
1. next/Image 태그를 import 한다
2. fill 과 objectFit, sizes를 아래코드와 같이 설정한다.
3. Image태그의 부모요소에 position: "relative"를 설정한다. (크기가 지정되어있지 않을 경우 width, height도 설정)
++ background-image 위에 글자 보이게 하는법
4. Image태그의 부모요소 (여기서는 Item)의 background-color를 투명하게 만든다.
5. 글자를 div 태그로 감싸고 absolute를 준다.
6. 중앙정렬 한다.
7. z-index를 넣어 앞에 위치하게 한다.
전체코드
import React from "react";
import { Grid, Paper } from "@mui/material";
import { experimentalStyled as styled } from "@mui/material/styles";
import { countinents, mainCountries } from "@statics/continents";
import { useRouter } from "next/router";
import { MainCountriesProps } from "types/regions";
import Image from "next/image";
const Continent = () => {
const Item = styled(Paper)(({ theme }) => ({
width: 179,
height: 170,
padding: theme.spacing(7),
justifyContent: "center",
textAlign: "center",
textShadow: "0px 0px 5px #FFF",
fontWeight: 700,
color: "black",
position: "relative",
bgcolor: "transparent",
cursor: "pointer"
}));
const router = useRouter();
const handleContinent = (item: string) => {
let continent = item.toLowerCase().replace(/ /g, "_");
router.push({
pathname: "/magazineList",
query: {
continent: continent,
title: item,
},
});
};
const handleMainCountries = (item: MainCountriesProps) => {
router.push({
pathname: "/magazineList",
query: {
region_id: item.regionId,
title: item.name,
},
});
};
return (
<>
<Grid container spacing={3}>
{countinents.map((item, index) => (
<Grid item md={3} key={index}>
<Item
onClick={(e) => {
e.preventDefault();
handleContinent(item as string);
}}>
<Image
src={`/images/continent/${item
.toLowerCase()
.replace(/ /g, "_")}.svg`}
alt={item}
fill
sizes="100vw"
style={{
objectFit: "cover",
}}
/>
<div
style={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
zIndex: "1",
}}>
{item}
</div>
</Item>
</Grid>
))}
</Grid>
</>
);
};
export default Continent;
728x90
반응형
'Next.js (pages router)' 카테고리의 다른 글
Next.js Sever Side Rendering을 위한 함수 | pages router (0) | 2024.03.22 |
---|---|
Next.js Image 사진 비율 안깨지게 하는 법 | object-fit cover (0) | 2024.03.20 |
Next.js pages router favicon 및 title 태그 넣는 폴더 위치 (전역설정) (0) | 2024.02.08 |
next.js | react.js 매거진 리스트 데이터 패칭 문제 해결 (0) | 2023.12.14 |