Test vlastností background-clip a background-origin

background-clip

div bez background-clip se chová jako border-box. Bez background-origin se obrázek pozadí kreslí do rohu paddingu.

div s background-clip: border-box; se chová stejně, jako kdyby background-clip nebylo nastaveno

div s background-clip: padding-box; vykresluje pozadí jen pod paddingem, pod rámečkem už ne

div s background-clip: content-box; vykresluje pozadí jen pod obsahem

div s background-clip: text; většinou nefunguje a chová se jako border-box, ale jednou bude jen pod textem

v divu bez background-origin se obrázek pozadí kreslí do rohu paddingu, chová se jako backgroun-origin: padding-box.

div s background-origin: border-box; posouvá obrázek pozadí do rohu rámečku. Vidíte ho, protože border mám poloprůhlednou barvou.

div s background-origin: content-box; posouvá obrázek pozadí do obsahu mimo padding

lineární gradient se chová jako obrázek, tedy bez nastavení background-clip nebo background-origin se vykresluje jenom pod paddingem

Příklad se vztahuje k vlastnostem background-clip a background-origin, popisuji to taky u vlastnosti background a background-position.