如何为文章页眉添加全宽标题图像

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图像

冰冻三尺非一日之寒，勤加练习才能够有进步

二、目录

自动生成