更多操作
无编辑摘要 |
无编辑摘要 |
||
| 第11行： | 第11行： | ||
.home-genres-navigation .img-fit { | .home-genres-navigation .img-fit { | ||
display: block; | display: block; | ||
background: black; | |||
border-radius: 5px; | |||
} | } | ||
| 第18行： | 第20行： | ||
mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent); | mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent); | ||
border-radius: 5px; | border-radius: 5px; | ||
object-fit: cover; | |||
} | } | ||
| 第29行： | 第31行： | ||
justify-content: space-around; | justify-content: space-around; | ||
position: relative; | position: relative; | ||
top: - | top: -100px; | ||
height: 0; | height: 0; | ||
color: white; | |||
font-size: 1.5rem; | |||
line-height: 100px; | |||
} | } | ||
2025年3月31日 (一) 12:53的版本
.home-genres-navigation {
width: 100%;
min-width: 600px;
display: grid;
grid-template-columns: repeat(5,20%);
gap: 5px 5px;
padding: 0 0 5px 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: 64px;
mask-image: linear-gradient(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: -100px;
height: 0;
color: white;
font-size: 1.5rem;
line-height: 100px;
}