css 玩背景附件

Posted 2021-05-13

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}

<p>Scroll the individual containers as well as
the page itself. Observe the differences</p>

<pre class="scroll">
	background-attachment: scroll<br>
	background-attachment: scroll<br>
	background-attachment: scroll<br>
	background-attachment: scroll<br>
	background-attachment: scroll<br>
	background-attachment: scroll<br>
	background-attachment: scroll<br>
	background-attachment: scroll<br>
	background-attachment: scroll<br>
	background-attachment: scroll<br>
	background-attachment: scroll<br>
	background-attachment: scroll
</pre>

<pre class="fixed">
	background-attachment: fixed<br>
	background-attachment: fixed<br>
	background-attachment: fixed <br>
	background-attachment: fixed <br>
	background-attachment: fixed <br>
	background-attachment: fixed <br>
	background-attachment: fixed <br>
	background-attachment: fixed <br>
	background-attachment: fixed <br>
	background-attachment: fixed <br>
	background-attachment: fixed <br>
	background-attachment: fixed

</pre>

<pre class="local">
	background-attachment: local <br>
	background-attachment: local <br>
	background-attachment: local <br>
	background-attachment: local <br>
	background-attachment: local <br>
	background-attachment: local <br>
	background-attachment: local <br>
	background-attachment: local <br>
	background-attachment: local <br>
	background-attachment: local <br>
	background-attachment: local <br>
	background-attachment: local

</pre>

MOAR content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>

/**
 * Playing with background-attachment
 */

pre {
	max-height: 150px;
	border: 1px solid silver;
	overflow: auto;
	background: url('http://placekitten.com/200/200');
	color: white;
	text-shadow: 0 -.1em .1em black;
}

.scroll { background-attachment: scroll; }

.fixed { background-attachment: fixed; }

.local { background-attachment: local; }

body { padding: 10% }