00012.【CSS】背景附加

 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>