Beispiel:CSS3 background-origin.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
<title>background-origin</title>
<style>
table { border-collapse: collapse; border: 1px solid black; }
th, td { padding: 10px; border: 1px solid black; background-color: #ddd; }
th code { display: block; margin: auto; }
div {
width: 50px;
height: 50px;
margin: 0 auto;
outline: 1px solid black;
border: 25px dotted red;
padding: 25px;
background-image: url("https://wiki.selfhtml.org/mediawiki/images/2/26/Background.png");
background-repeat: no-repeat;
}
.ori-border { background-origin: border-box;}
.ori-padding { background-origin: padding-box;}
.ori-content { background-origin: content-box;}
.clip-border div { background-clip: border-box;}
.clip-padding div { background-clip: padding-box;}
.clip-content div { background-clip: content-box;}
</style>
</head>
<body>
<h1>Verwendung von <code>background-origin</code></h1>
<main>
<h2>Hintergrundbereich festlegen</h2>
<table>
<thead>
<tr>
<td></td>
<th><code>background-origin: border-box</code></th>
<th><code>background-origin: padding-box</code>(Voreinstellung)</th>
<th><code>background-origin: content-box</code></th>
</tr>
</thead>
<tbody>
<tr class="clip-border">
<th><code>background-clip: border-box</code></th>
<td><div class="ori-border"></div></td>
<td><div class="ori-padding"></div></td>
<td><div class="ori-content"></div></td>
</tr>
<tr class="clip-padding">
<th><code>background-clip: padding-box</code> (Voreinstellung)</th>
<td><div class="ori-border"></div></td>
<td><div class="ori-padding"></div></td>
<td><div class="ori-content"></div></td>
</tr>
<tr class="clip-content">
<th><code>background-clip: content-box</code></th>
<td><div class="ori-border"></div></td>
<td><div class="ori-padding"></div></td>
<td><div class="ori-content"></div></td>
</tr>
</tbody>
</table>
</main>
</body>
</html>
