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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
<template>
<section>
<article class="scroll">
<p><code>background-attachment: scroll</code> causes the element's background to be fixed to the page, so that it
scrolls when the page is scrolled. If the element content is scrolled, the background does not move.</p>
<pre></pre>
</article>
<article class="fixed">
<p><code>background-attachment: fixed</code> causes an element's background to be fixed to the viewport, so that
it
doesn't scroll when the page or element content is scrolled. It will always remain in the same position on the
screen.</p>
<pre></pre>
</article>
<article class="local">
<p><code>background-attachment: local</code>, new to CSS3, causes an element's background to be fixed to the
actual
element itself. So When the page is scrolled, the element's background will move along with it only if the
element
does so (so not in the case of elements with <code>position: fixed</code>.) When the element's content is
scrolled, the background will scroll along with it.</p>
<pre></pre>
</article>
</section>
</template>
<script setup>
</script>
<style scoped>
p {
padding: 10px;
color: white;
background: rgba(0, 0, 0, 0.3);
}
section {
display: flex;
}
article {
flex: 1;
height: 400px;
background-color: rgba(0, 0, 0, 0.5);
background-image: url("../assets/emoji.png");
background-size: 400px 400px;
background-repeat: no-repeat;
background-position: top center;
padding: 1%;
overflow: auto;
}
article pre {
height: 800px;
}
.scroll {
background-attachment: scroll;
}
.fixed {
background-attachment: fixed;
}
.local {
background-attachment: local;
}
</style>
|