建站随想

自定义背景图片演示

自定义背景图片功能演示

本文将展示如何在博客中使用自定义背景图片功能，让您的博客页面更加个性化和美观。

背景图片功能介绍

通过我们新增的自定义背景图片功能，您可以：

  1. 为整个网站或单个页面设置背景图片
  2. 调整背景图片的透明度
  3. 调整背景图片的尺寸和位置
  4. 选择明亮或暗色主题

这些功能可以让您的博客在保持内容可读性的同时，呈现出更加个性化的视觉效果。

如何使用

全站设置

如果您希望为整个网站设置背景图片，可以在网站配置文件 _config.yml 中添加以下设置：

1
2
3
4
5
6
7
# 透明背景设置
transparent_background: true # 启用透明背景
bg_image: bg-image-1 # 使用预设背景图片1
bg_opacity: 70 # 背景图片不透明度为70%
bg_size: contain # 背景图片尺寸为完整显示
bg_position: center # 背景图片位置为居中
dark_theme: false # 使用明亮主题

单页面设置

如果您只想为特定页面设置背景图片，可以在文章的Front-matter中添加相关设置：

1
2
3
4
5
6
7
8
9
10
---
title: 文章标题
transparent_background: true # 启用透明背景
bg_image: custom # 使用自定义背景图片
custom_bg_image: /images/your-image.jpg # 自定义背景图片路径
bg_opacity: 30 # 背景图片不透明度为30%
bg_size: width-100 # 背景图片宽度100%，高度自适应
bg_position: top # 背景图片顶部对齐
dark_theme: true # 使用暗色主题
---

预设背景图片

系统提供了5张预设背景图片，您可以通过设置 bg_image 为 bg-image-1 到 bg-image-5 来使用它们。

自定义背景图片

如果您想使用自己的图片作为背景，需要：

  1. 将 bg_image 设置为 custom
  2. 将 custom_bg_image 设置为您的图片路径
  3. 将图片放置在 /source/images/ 目录下的适当位置

透明度设置

您可以调整背景图片的透明度：

  • bg_opacity: 背景图片的不透明度，值范围为10到100，以10为步长

在新版设计中，所有内容区块都是完全透明的，只有文字本身带有阴影以确保可读性。这样背景图片可以完全展示，不会被内容区块遮挡。

背景图片尺寸设置

您可以通过设置 bg_size 来调整背景图片的显示尺寸：

  • width-100: 宽度100%，高度自适应（保持比例，默认推荐）
  • contain: 完整显示图片，确保整个图片都可见（可能会有空白）
  • auto: 使用图片原始尺寸
  • 100: 拉伸填满整个屏幕
  • height-100: 高度100%，宽度自适应（保持比例）
  • cover: 覆盖整个区域（可能裁剪部分图片）

背景图片位置设置

您可以通过设置 bg_position 来调整背景图片的位置：

  • top: 顶部对齐（默认推荐）
  • center: 居中显示
  • bottom: 底部对齐
  • left: 左侧对齐
  • right: 右侧对齐

这些设置可以帮助您更好地控制背景图片的显示效果，确保重要部分能够正确显示。

背景滚动模式设置

您可以通过设置 bg_scroll 来控制背景图片是否随页面滚动：

  • true: 背景图片随页面滚动（默认）
    • 适合长图作为背景，随着页面滚动可以看到图片的不同部分
    • 在文章末尾可以看到背景图片的底部
  • false: 背景图片固定不动
    • 适合需要始终显示的背景图片
    • 无论页面滚动到哪里，背景图片位置不变

选择合适的滚动模式可以增强用户体验，特别是对于长图背景，设置为随页面滚动可以展示更多图片内容。

暗色主题

如果您的背景图片颜色较深，可以启用暗色主题，使文字颜色变为浅色，提高可读性：

1
dark_theme: true

效果展示

本页面就是使用自定义背景图片的一个示例。您可以看到：

  • 背景图片使用了网站中已有的图片
  • 背景图片透明度设置为30%
  • 背景图片尺寸设置为宽度100%(width-100)，不裁剪宽度
  • 背景图片位置设置为顶部对齐(top)
  • 背景图片随页面滚动(scroll)，可以看到图片的不同部分
  • 所有区块背景完全透明，只有文字可见
  • 使用了明亮主题

注意事项

  1. 选择背景图片时，尽量选择不会影响文字可读性的图片
  2. 如果背景图片较为复杂，建议提高内容区域的不透明度
  3. 对于深色背景图片，建议启用暗色主题
  4. 背景图片尺寸过大可能会影响页面加载速度

希望这个功能能够帮助您打造更加个性化的博客！