jekyll.jpg
这是我选择的代码
我的代码.jpg
这是选择的效果
我的效果.jpg
这是我最终修改的效果
我的效果简化版.jpg
接下来介绍方法，要竖起耳朵听清楚了哦
1、直接添加文章头部图片会全部占满图像实际大小所需空间，布满整个页面，不美观。
代码
header:
image: /images/bk.jpg
效果：
1、占满.jpg
也可以外部托管（网页URL）
代码：
header:
image: https://goss4.vcg.com/creative/vcg/800/version23/VCG21gic15904405.jpg
效果：无，出错了
标准代码：
header:
image: http://some-site.com/assets/images/image.jpg
效果：未实验成功
2、为屏幕阅读器提供自定义alt标记
代码
header:
image:/images/bk.jpg
image_description: "A description of the image"
效果：无，实验失败
3、为图片添加标题或属性
代码：
header:
image: /assets/images/unsplash-image-1.jpg
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
效果：
3、右下角的属性.jpg
4、标题叠加——多种标题图片添加文字效果可以尝试
多种标题图片添加文字效果可以尝试.jpg
5、一个标题文字覆盖文本和一个行动呼吁按钮
代码：
excerpt: "This post should display a **header with an overlay image**, if the
theme supports it."
header:
overlay_image:/images/bk.jpg
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
cta_label: "More Info"
cta_url: "https://unsplash.com"
效果：
5、按钮和文字.jpg
6、可以选择指定要使用的纯色背景颜色而不是图像
代码：
excerpt: "This post should display a **header with a solid background color**, if
the theme supports it."
header:
overlay_color: "#333"
效果：
6、纯色背景.jpg
7、可以指定黑色叠加层的不透明度（在0和之间1）
代码：
excerpt: "This post should [...]"
header:
overlay_image: /images/bk.jpg
overlay_filter: 0.5 # same as adding an opacity of 0.5 to a black background
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
cta_label: "More Info"
cta_url: "https://unsplash.com"
效果：
7、调节不透明度.jpg
8、你想做更多花哨的事情，请完整的rgba：
代码：
excerpt: "This post should [...]"
header:
overlay_image: /assets/images/unsplash-image-1.jpg
overlay_filter: rgba(255, 0, 0, 0.5)
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
cta_label: "More Info"
cta_url: "https://unsplash.com"
效果：
8、rgba的效果.jpg
9、OpenGraph和Twitter卡图片
默认情况下，大页面标题或叠加图像用于共享预览。如果您想将此图像设置为其他用途page.header.og_image
代码：
header:
image: /assets/images/your-page-image.jpg
og_image: /assets/images/your-og-image.jpg
效果：无显示，实验失败
ProTip： og_image用于在没有标题或叠加图像的页面上设置OpenGraph图像
冰冻三尺非一日之寒，勤加练习才能够有进步
二、目录
自动生成
网友评论