# background-image-blend

The markup of every demo on <https://kuiper.oeds.it/background-image-blend/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## blend

Varies: 15 specimens.

```html
<div class="grid-xs" data-grid>
 <div class="width-1-2 width-1-3@s width-1-3@m width-1-5@l width-1-5@xl"><div class="card"><canvas class="canvas canvas-3-2 background-primary background-cover background-blend-multiply" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-blend-multiply</p></div></div>
 <div class="width-1-2 width-1-3@s width-1-3@m width-1-5@l width-1-5@xl"><div class="card"><canvas class="canvas canvas-3-2 background-primary background-cover background-blend-screen" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-blend-screen</p></div></div>
 <div class="width-1-2 width-1-3@s width-1-3@m width-1-5@l width-1-5@xl"><div class="card"><canvas class="canvas canvas-3-2 background-primary background-cover background-blend-overlay" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-blend-overlay</p></div></div>
 <div class="width-1-2 width-1-3@s width-1-3@m width-1-5@l width-1-5@xl"><div class="card"><canvas class="canvas canvas-3-2 background-primary background-cover background-blend-darken" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-blend-darken</p></div></div>
 <div class="width-1-2 width-1-3@s width-1-3@m width-1-5@l width-1-5@xl"><div class="card"><canvas class="canvas canvas-3-2 background-primary background-cover background-blend-lighten" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-blend-lighten</p></div></div>
 <div class="width-1-2 width-1-3@s width-1-3@m width-1-5@l width-1-5@xl"><div class="card"><canvas class="canvas canvas-3-2 background-primary background-cover background-blend-color-dodge" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-blend-color-dodge</p></div></div>
 <div class="width-1-2 width-1-3@s width-1-3@m width-1-5@l width-1-5@xl"><div class="card"><canvas class="canvas canvas-3-2 background-primary background-cover background-blend-color-burn" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-blend-color-burn</p></div></div>
 <div class="width-1-2 width-1-3@s width-1-3@m width-1-5@l width-1-5@xl"><div class="card"><canvas class="canvas canvas-3-2 background-primary background-cover background-blend-hard-light" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-blend-hard-light</p></div></div>
 <div class="width-1-2 width-1-3@s width-1-3@m width-1-5@l width-1-5@xl"><div class="card"><canvas class="canvas canvas-3-2 background-primary background-cover background-blend-soft-light" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-blend-soft-light</p></div></div>
 <div class="width-1-2 width-1-3@s width-1-3@m width-1-5@l width-1-5@xl"><div class="card"><canvas class="canvas canvas-3-2 background-primary background-cover background-blend-difference" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-blend-difference</p></div></div>
 <div class="width-1-2 width-1-3@s width-1-3@m width-1-5@l width-1-5@xl"><div class="card"><canvas class="canvas canvas-3-2 background-primary background-cover background-blend-exclusion" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-blend-exclusion</p></div></div>
 <div class="width-1-2 width-1-3@s width-1-3@m width-1-5@l width-1-5@xl"><div class="card"><canvas class="canvas canvas-3-2 background-primary background-cover background-blend-hue" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-blend-hue</p></div></div>
 <div class="width-1-2 width-1-3@s width-1-3@m width-1-5@l width-1-5@xl"><div class="card"><canvas class="canvas canvas-3-2 background-primary background-cover background-blend-saturation" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-blend-saturation</p></div></div>
 <div class="width-1-2 width-1-3@s width-1-3@m width-1-5@l width-1-5@xl"><div class="card"><canvas class="canvas canvas-3-2 background-primary background-cover background-blend-color" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-blend-color</p></div></div>
 <div class="width-1-2 width-1-3@s width-1-3@m width-1-5@l width-1-5@xl"><div class="card"><canvas class="canvas canvas-3-2 background-primary background-cover background-blend-luminosity" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-blend-luminosity</p></div></div>
</div>
```