Obsidian 学习笔记

Appearance

图片样式增强 ​

图片是笔记的重要视觉元素。通过 CSS 可以让图片自动添加圆角、阴影，并支持通过 alt 文本控制尺寸。

基础美化 ​

css
/* 图片圆角和阴影 */
.markdown-preview-view img {
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 悬停放大 */
.markdown-preview-view img:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

/* 深色模式阴影 */
.theme-dark .markdown-preview-view img {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

尺寸控制 ​

通过在图片 alt 文本中添加关键词控制尺寸：

css
/* 小图 */
img[alt*="small"] {
  width: 200px;
}

/* 中图 */
img[alt*="medium"] {
  width: 400px;
}

/* 大图 */
img[alt*="large"] {
  width: 600px;
}

/* 全宽 */
img[alt*="full"] {
  width: 100%;
}

使用方式：

markdown
![small 截图](image.png)
![medium 流程图](diagram.png)
![full 宽屏图](panorama.png)

对齐方式 ​

css
/* 居中 */
img[alt*="center"] {
  display: block;
  margin: 0 auto;
}

/* 左对齐 */
img[alt*="left"] {
  float: left;
  margin-right: 1em;
}

/* 右对齐 */
img[alt*="right"] {
  float: right;
  margin-left: 1em;
}

图片说明 ​

css
/* 图片下方说明 */
.markdown-preview-view img + em {
  display: block;
  text-align: center;
  font-size: 0.85em;
  color: var(--text-muted);
  margin-top: 0.5em;
}

圆形头像 ​

css
/* 圆形图片（头像） */
img[alt*="avatar"] {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

边框样式 ​

css
/* 图片边框 */
img[alt*="border"] {
  border: 2px solid var(--background-modifier-border);
  padding: 4px;
  background: var(--background-secondary);
}

相关内容 ​