更多操作
无编辑摘要 |
无编辑摘要 |
||
| 第2行： | 第2行： | ||
width: 100%; | width: 100%; | ||
display: grid; | display: grid; | ||
grid-template-columns: repeat(auto-fit, minmax( | grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); | ||
gap: 5px 5px; | gap: 5px 5px; | ||
padding: 0 0 0.5rem 0; | padding: 0 0 0.5rem 0; | ||
| 第16行： | 第16行： | ||
.home-genres-navigation .img-fit img{ | .home-genres-navigation .img-fit img{ | ||
width: 100%; | width: 100%; | ||
height: | height: 6rem; | ||
mask-image: linear-gradient(to left, rgba(0, 0, 0, 1), transparent); | mask-image: linear-gradient(to left, rgba(0, 0, 0, 1), transparent); | ||
border-radius: 5px; | border-radius: 5px; | ||
| 第30行： | 第30行： | ||
justify-content: space-around; | justify-content: space-around; | ||
position: relative; | position: relative; | ||
top: - | top: -6rem; | ||
height: 0; | height: 0; | ||
color: white; | color: white; | ||
font-size: 1.2rem; | font-size: 1.2rem; | ||
line-height: | line-height: 6rem; | ||
} | } | ||
2025年3月31日 (一) 14:05的版本
.home-genres-navigation {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
gap: 5px 5px;
padding: 0 0 0.5rem 0;
text-align: center;
}
.home-genres-navigation .img-fit {
display: block;
background: black;
border-radius: 5px;
}
.home-genres-navigation .img-fit img{
width: 100%;
height: 6rem;
mask-image: linear-gradient(to left, rgba(0, 0, 0, 1), transparent);
border-radius: 5px;
object-fit: cover;
}
.home-genres-navigation .img-fit img:hover {
transform: scale(1.05);
}
.home-genres-navigation .title {
display: flex;
justify-content: space-around;
position: relative;
top: -6rem;
height: 0;
color: white;
font-size: 1.2rem;
line-height: 6rem;
}