Image Layout
The image layout has a fullscreen background image with optionallly a (transparent) overlay color over it. It is the base class for other layouts as well (cover, section).
| Name | Type | Description | Default |
|---|---|---|---|
| color | String | Background color | undefined |
| color-opacity | Number | Opacity of the background color | 0.75 if image else 1 |
| image | String | Background image (can be local file or URL) | |
| image-opacity | Number | Opacity of the background image | 1 |
| image-filter | String | CSS filter for the image | |
| image-transform | String | CSS transform for the image |
/
Default
|
|
---
layout: image
class: stack text-center
image: https://images.unsplash.com/...
---
## You can add content as well.
--- |
Color
|
|
---
layout: image
class: stack text-center font-800
image: https://images.unsplash.com/...
image-filter: blur(2px)
image-transform: scale(2)
color: var(--kul-orange-400)
color-opacity: 0.5
---
# Be Creative
--- |
Gradient
|
|
---
layout: image
class: stack text-center text-black font-600
image: https://images.unsplash.com/...
color: 'linear-gradient(45deg, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%)'
---
## This wall is white
<style>
.slidev-layout::after { mix-blend-mode: multiply; }
</style>
--- |
