9
9. Using the new background-blend-mode: multiply
on the container, rather bizarrely, makes the text blend, rather than the background below.
.round {
background-image: url(/images/round.png);
background-repeat: round;
background-blend-mode: multiply;
display: grid;
place-items: center;
}
.round h1 {
color: blue;
font-size: 250px;
margin: 0;
}
10
10. This time using mix-blend-mode: multiply
makes everything blend.
.round {
mix-blend-mode: multiply;
}
?
Conclusion
So what exactly is background-blend-mode
useful for? It seems if you have a textured backgound like on this page and you want everything to be blended to it applying background-blend-mode
will affect all elements placed upon it.
See also Page 35
8. Using the new background-repeat property:
round
. This stretches a repeating image so it fits in a space without being clipped. This image is 55px x 55px so it won't fit perfectly inside the 250px square box.'