Hexo博客封面增加视频背景及纹理

发布日期: 2021-10-05

先看一下背景视频封面效果截图：

效果展示

增加视频背景

在需要加入视频的链接插入代码。例如在我博客的首页封面改为视频背景，则找到主题下的/layout/_partial/index-cover.ejs,然后将下列代码插入文件最前方保存即可生成视频背景页面。

<!-- 如果需要切换为图片背景，将此段注释即可 -->
    <style>
        #index-video { z-index: -1; position: absolute; top: 0; left: 0; height: 100vh; width: 100%; object-fit: cover;}
        @media only screen and (max-width: 760px) { #index-video { display: none;}}
        @media only screen and (min-width: 760px) { .bg-cover { background-image: none!important;}}
    </style>
    <video id="index-video" autoplay loop muted>
        <source src="https://txmov2.a.yximgs.com/upic/2021/09/30/15/BMjAyMTA5MzAxNTE5MDhfMTg1ODk2MDg4N181ODA5MjQ1NDkyMV8xXzM=_b_Bef514871cf947c46c11bc54a3ed3faa9.mp4?pkey=AAWo-kOQESq9j_AMCO-BT6jTPS090PuVHWtyuSQ8cddkgMmI3V-P9uWMDY13QrPuCjtWVbch_01wRcj6Rtm5w0AkLhgVTMSceLLiRYjlWUfLDNNLX3jISKEscl9uNXUnYcM&tag=1-1632986688-xpcwebprofile-0-ongrobirtl-58c917acab52d13f&clientCacheKey=3xajcj9u8fubzm4_b.mp4">
    </video>
<!-- src后面接入你的视频链接 -->
<!-- 如果需要切换为图片背景，将此段注释即可 -->

如需要恢复之前的图片背景，则将则段代码删除即可。

增加线条纹理遮罩

光加一个视频封面背景看起来效果可能还差点意思，再在视频封面上层加一个线条遮罩。

线条遮罩

下载线条效果元素，将线条效果元素放入到网页目录中（主题目录下/source/medias）。

下载地址：https://xmq.plus/medias/bggrid.png

就matery博客而言，只需要找到主题/source/css/matery.css样式文件，打开搜索定位到.bg-cover:before,
.bg-cover:after（即视频封面区域的样式设置），在其中加入背景代码：background-image: url(/medias/bggrid.png);

.bg-cover:before,
.bg-cover:after {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    left: 0;
    top: 0;
    content: "";
    background-image: url(/medias/bggrid.png);
}

若不是hexo页面，则自己找到视频封面所在的div 在其中加入background-image: url(图片地址);即可。

Hexo