csstdg5figs/08-backgrounds/background-origin-differing-clips.html at main · meyerweb/csstdg5figs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
			"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>When origin and clipping diverge</title>
<style type="text/css">
body {width: 800px;}
div[id] {color: navy; background: silver;
		background-image: url(i/yinyang.png);
		background-repeat: no-repeat;
     	padding: 1em; margin: 1em; border: 5px dashed;}
#ex01 {background-origin: padding-box; background-clip: content-box;}
#ex02 {background-origin: content-box; background-clip: padding-box;}

</style>
</head>
<body>

<div id="ex01">
<p>Mutationem quod option anne heche john w. heisman westlake severance hall est, margaret hamilton te. Id south euclid quod miscellaneous, john d. rockefeller gates mills cuyahoga heights bratenahl. Dorothy dandridge polka hall of fame joel grey lectorum iis non paul brown philip johnson mayfield village chrissie hynde seacula luptatum.</p>
</div>
<div id="ex02">
<p>Mutationem quod option anne heche john w. heisman westlake severance hall est, margaret hamilton te. Id south euclid quod miscellaneous, john d. rockefeller gates mills cuyahoga heights bratenahl. Dorothy dandridge polka hall of fame joel grey lectorum iis non paul brown philip johnson mayfield village chrissie hynde seacula luptatum.</p>
</div>

</body>
</html>