图片位置
图片放在/assets/images
, 可在此目录下再次添加子目录, 如/assets/images/2021/08
, 做一个简单分类, 作为图片的存放位置
语法
参考布局
头部颜色
---
layout: article
title: Page - Article Header Overlay Background Fill (Immersive + Translucent Header)
mode: immersive
header:
theme: dark
article_header:
type: overlay
theme: dark
background_color: '#123'
background_image: false
---
头部带标题
---
layout: article
title: Page - Article Header Overlay Background Image (Immersive + Translucent Header)
mode: immersive
header:
theme: dark
article_header:
type: overlay
theme: dark
background_color: '#203028'
background_image:
gradient: 'linear-gradient(135deg, rgba(34, 139, 87 , .4), rgba(139, 34, 139, .4))'
src: /docs/assets/images/cover3.jpg
---
头部不带标题
---
layout: article
title: Page - Article Header Image (Immersive + Translucent Header)
mode: immersive
header:
theme: dark
article_header:
type: cover
image:
src: /docs/assets/images/cover2.jpg
---
内容
![图片](/assets/images/2021/08/create_images_galaxy.jpg)
效果
样式
<!-- 大小有image--md (default), image--xs, image--sm, image--lg, image--xl-->
<!-- add image--xxl-->
![图片](/assets/images/2021/08/create_images_galaxy.jpg){:.image--xl}
<!-- 样式有border,shadow,rounded,circle-->
![图片](/assets/images/2021/08/create_images_galaxy.jpg){:.image--xl.rounded.shadow}
参考
压缩软件
参考
推荐图压
压缩之后