Live
x
<html> <head> <title>Origin / Clip</title> <style> div { width: 600px; height: 300px; margin: 20px; /* Ustawiamy dość spore wartości dla "margin" i "padding". */ border: 20px dashed red; padding: 20px; background-image: url(https://cdn.pixabay.com/photo/2020/02/05/06/24/cat-4820202_960_720.jpg); /* Dla czytelności tego przykładu ustawiamy również poniższe wartości. */ background-repeat: no-repeat; background-size: cover; } .one.origin { /* Tło zachodzi na "border", pełne wypełnienie. */ background-origin: border-box; } .one.clip { /* Tło jedynie delikatnie zachodzi na "border". */ background-clip: border-box; } .two.origin { /* Tło jedynie delikatnie zachodzi na "border". */ background-origin: padding-box; } .two.clip { /* Tło zachodzi na "padding" ale nie na "margin". */ background-clip: padding-box; } .three.origin { /* Tło delikatnie zachodzi na "padding". */ background-origin: content-box; } .three.clip { /* Tło nie zachodzi na "padding". */ background-clip: content-box; } </style> </head> <body> <pre>background-origin: border-box 👇</pre> <div class="one origin"></div> <pre>background-clip: border-box 👇</pre> <div class="one clip"></div> <pre>background-origin: padding-box 👇</pre> <div class="two origin"></div> <pre>background-clip: padding-box 👇</pre> <div class="two clip"></div> <pre>background-origin: content-box 👇</pre> <div class="three origin"></div> <pre>background-clip: content-box 👇</pre> <div class="three clip"></div> </body></html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.