模板:色卡标签/styles.css:修订间差异
来自ANACHRONISM
更多操作
< 模板:色卡标签
创建页面,内容为“→============================================ 色卡标签 ============================================: .tag { position: relative; overflow: hidden; } .tag__link { position: absolute; inset: 0; z-index: 10; display: block; font-size: 0; } .tag__link a { display: block; width: 100%; height: 100%; }” |
无编辑摘要 |
||
| 第2行: | 第2行: | ||
色卡标签 | 色卡标签 | ||
============================================ */ | ============================================ */ | ||
.tag { | .tag { | ||
position: relative; | position: relative; | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
/* 背景图铺满卡片 */ | |||
.tag-bg-img { | |||
width: 100%; | |||
height: 100%; | |||
object-fit: cover; | |||
display: block; | |||
} | |||
/* 链接层铺满卡片 */ | |||
.tag__link { | .tag__link { | ||
position: absolute; | position: absolute; | ||
| 第18行: | 第29行: | ||
height: 100%; | height: 100%; | ||
} | } | ||
/* 四角装饰 */ | |||
.tag__corner { | |||
position: absolute; | |||
z-index: 2; | |||
color: #fff; | |||
font-size: 0.9em; | |||
line-height: 1; | |||
pointer-events: none; | |||
} | |||
.tag__corner--tl { top: 0.3em; left: 0.4em; } | |||
.tag__corner--tr { top: 0.3em; right: 0.4em; } | |||
.tag__corner--bl { bottom: 0.3em; left: 0.4em; } | |||
.tag__corner--br { bottom: 0.3em; right: 0.4em; } | |||
2026年10月6日 (二) 17:46的版本
/* ============================================
色卡标签
============================================ */
.tag {
position: relative;
overflow: hidden;
}
/* 背景图铺满卡片 */
.tag-bg-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* 链接层铺满卡片 */
.tag__link {
position: absolute;
inset: 0;
z-index: 10;
display: block;
font-size: 0;
}
.tag__link a {
display: block;
width: 100%;
height: 100%;
}
/* 四角装饰 */
.tag__corner {
position: absolute;
z-index: 2;
color: #fff;
font-size: 0.9em;
line-height: 1;
pointer-events: none;
}
.tag__corner--tl { top: 0.3em; left: 0.4em; }
.tag__corner--tr { top: 0.3em; right: 0.4em; }
.tag__corner--bl { bottom: 0.3em; left: 0.4em; }
.tag__corner--br { bottom: 0.3em; right: 0.4em; }