校徽水印卡
一列写学校的卡片，右半边铺一枚圆形校徽做水印，只露出校徽中间一条横带。来自我博客旧首页的「教育」卡片。
原创css约 2 分钟
把鼠标移到卡片上，边框会加深、出一层浅阴影，点击会打开学校官网。注意右半边：整枚校徽放大到盖满卡片右半边，只露出中间一条横带。
做法
这是我博客旧首页「教育」一栏的卡片，原来放的是我自己学校的校徽，这里换成四所学校的做示例。卡片照博客主题 astro-pure 的 Card：浅灰底、1px 边框、16px 圆角，左边三行字，第一行 18px，下面两行是灰色的 16px，卡片之间隔 12px。
水印是一张 <img>，绝对定位贴着卡片右边，宽度是卡片的 50%，高度等于卡片，object-fit: cover，不透明度 40%。校徽是正方形，cover 会把它等比放大到和框一样宽。卡片 576px 宽时，框是 287 × 104px，校徽放大到 287px 见方，只露出中间约 36% 的一条横带：外圈文字的左右两段和中间的图案。卡片设了 overflow: hidden，校徽超出圆角的部分裁掉。校徽保留原来的颜色，乘上 40% 的不透明度后变成淡淡的一层，每张卡片的颜色跟着学校走。
深色模式下卡片换成深灰，校徽还是原来的颜色，看起来更暗、更淡；伯克利校徽里的书页和飘带是白色填充的，会比别处亮一些。开启「减少动态效果」时，悬停的过渡关掉，边框和阴影直接变。
提示词
复制下面的提示词，再把一枚圆形校徽的 SVG 作为附件一起发给 Claude、ChatGPT 或编码 agent，就能做出本页的卡片。
做一列经历卡片（纯 HTML/CSS，放进 Vue、React 组件都行）：每张卡片左边三行字，右半边铺一枚圆形校徽做水印。附件是一枚圆形校徽的 SVG，用它做水印。
1. 卡片：position relative，display block，overflow hidden；padding 12px 20px；1px 边框 hsl(240 5.9% 88%)，圆角 16px，底色 hsl(240 4.8% 96%)。最大宽度 576px，多张卡片纵向排列，间距 12px。
2. 文字：三行纵向排列，间距 2px。第一行 18px / 28px，字重 500，颜色 hsl(240 10% 3.9%)；后两行 16px / 24px，颜色 hsl(240 3.8% 28.1%)。文字容器设 position relative，压在水印上面。
3. 水印：<img src="校徽.svg" alt="">，写在文字前面。position absolute，top 0，right 0，width 50%，height 100%，margin 0，object-fit cover，opacity 0.4。正方形的校徽会等比放大到框的宽度，卡片又宽又扁，所以只露出校徽中间一条横带（576px 宽的卡片约露出 36%）。校徽保留原色。
4. 卡片是链接时：transition all 150ms cubic-bezier(0.4, 0, 0.2, 1)；悬停时边框颜色变成文字色的 25%，加 box-shadow 0 1px 2px 0 rgb(0 0 0 / 5%)。prefers-reduced-motion 时去掉过渡。
5. 深色模式：卡片底色 hsl(240 5.9% 13%)，边框 hsl(240 3.7% 22.9%)，第一行 hsl(0 0% 98%)，后两行 hsl(240 5% 74.9%)。
6. 容易出错的地方：
- 校徽 SVG 如果垫着一块白色底（比如铺在最下面的白色圆），删掉，让底透明，不然深色模式下是一块亮斑。
- 页面的全局样式会给 a、h3、p 加下划线和上下边距时，卡片里要显式清掉（text-decoration none、margin 0），否则卡片会被撑高，露出的就不再是一条横带。
本页用的四枚校徽，可以直接下载当附件。SVG 都来自 Wikimedia Commons，标注为公有领域，除清华外都注明是注册商标，这里只作示例。下载后删掉了注释、编辑器元数据和空白，路径没动；伯克利的去掉了垫在最下面的白色圆底。
| 学校 | 本页用的 SVG | 来源 |
|---|---|---|
| 北京大学 | peking.svg（34KB） | Peking University seal.svg |
| 清华大学 | tsinghua.svg（422KB） | Tsinghua University Logo.svg |
| 复旦大学 | fudan.svg（18KB） | Fudan University Logo.svg |
| 加州大学伯克利分校 | berkeley.svg（35KB） | The University of California Berkeley 1868.svg |
