想为网页添加背景图，我们只需要使用CSS的 background-image: url(图片地址) 即可，还可以通过 background-position background-repeat 等属性控制图片的位置、重复等参数。
若是想设置背景图透明度的话，则可以使用CSS3的linear-gradient参数，为背景图添加一个透明渐变层来实现。

比如我们想为 Typecho 添加背景图，除了可以在模板页的CSS中添加数据之外，还可以通过 Typecho 的魔术方法 !!! 来直接将html代码写入到一个文章内，这样即可为每个单独的文章或者页面添加独特的背景图。
（非Typecho博客请自行查询插入HTML代码的方法）

!!!
<style>
body{
  background: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.5)),
    url( "https://img.clso.fun/file/b19580254a1f59a7db2cc.jpg" ) 50% 0% repeat fixed;
}
</style>
!!!
将此代码应用到 Typecho 的文章内，即可启用与本站相同的背景图设置。
其中，linear-gradient属性为CSS3的渐变层属性，可以设置多个值，用于让背景图具有渐变效果。再通过RGBA设置不同的遮罩与透明度，会让网页在滚动的过程中改变遮蔽层的透明度，产生动态的穿透效果。
url内设置图片的路径，后面跟着的两个百分比数值为背景图片的偏移数值，除了百分比外还可以直接指定像素px。
repeat指定图片自动重复，你还可以指定为no-repeat禁止重复，或者repeat-x repeat-y水平或垂直重复。
fixed指定图片不随网页滚动而变化，省略后图片会自动随着网页滚动。
你还可以将fixed属性改写为 /cover，这样图片就会自动转化为封面属性，图片的大小会最大化缩放为屏幕的可视化范围。
示例中的RGBA背景色为白色，透明度越高则背景图越白。如果你的站点主题为深色，可以将rgba(255, 255, 255, 0.85)改写为rgba(0, 0, 0, 0.85)，这样透明度越高则背景图会越暗。

拥有这一段代码，你就可以为单个页面设置个性化的背景图了。
但如果你想简化设置背景图的步骤，我们就可以利用最新版 Typecho-Plus 的自定义UBB解析功能，创造一个自定义的UBB代码段，来快速自定义自己的背景图设置代码。

首先，打开 usr\plugins\clsofun\tpluscustom.php 这个文件，将下面的代码写入到空行：
function bgimgParser($utag, $pars, $content){
    $alp1 = $pars[0] ?? '0.5';
    $alp2 = $pars[1] ?? '0.5';
    $pos1 = $pars[2] ?? '0%';
    $pos2 = $pars[3] ?? '0%';
    $rep = $pars[4] ?? 'repeat';
    $fix = $pars[5] ?? 'fixed';
    return "<style>body{background: linear-gradient(rgba(255, 255, 255, $alp1), rgba(255, 255, 255, $alp2)),url( \"$content\" ) $pos1 $pos2 $rep $fix;}</style>";
}
保存文件后，更新到服务器内的相同文件，之后你就可以在文章内添加下面的代码，来快速替换单个文章内的背景图了：
[bgimg=0.8,0.3,30%,0%]https://img.clso.fun/file/6060ba5c3811903abc7b0.jpg[/bgimg]
参数1、2=背景图的透明度渐进数值，为浮点数（0.0～1.0），数值越大越透明
参数3、4=背景图的初始位置，百分比或者像素值，记得带百分比号或者px
参数5=背景图的重复参数设置，不重复设置为 no-repeat
参数6=背景图的位置修正，fixed代表固定图片位置，/cover采用封面模式（自动最大化图片到可视范围）
注意：请尽量将代码放置到文章的末尾，并且不要全文输出到首页，否则可能会让首页的背景图被替换。

本页的背景图被替换为了琴团长，向左偏移30%，并且网页越往下滚动，背景图就会越清晰！

12