background-attachment
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Die background-attachment-Eigenschaft von CSS legt fest, ob die Position eines Hintergrundbildes innerhalb des Ansichtsfensters festgelegt ist oder mit seinem enthaltenden Block scrollt.
Probieren Sie es aus
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;
background-attachment: fixed, scroll;
background-attachment: scroll, fixed;
<section id="default-example">
<div id="example-element">
<p>
From there to here<br />
from here to there,<br />
Funny things<br />
Are everywhere.
</p>
<p>--Dr. Seuss</p>
</div>
</section>
body {
overflow: scroll;
}
#default-example {
height: 600px;
}
#example-element {
max-width: 20rem;
height: 100%;
background:
url("/shared-assets/images/examples/lizard.png") right 3rem top 1rem / 15rem
no-repeat,
url("/shared-assets/images/examples/moon.jpg") center / 10rem;
font-size: 1.2rem;
font-weight: bolder;
overflow: auto;
padding: 20px;
color: red;
text-shadow:
0 0 0.5rem black,
0 0 0.5rem black;
}
Syntax
/* Keyword values */
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;
/* Global values */
background-attachment: inherit;
background-attachment: initial;
background-attachment: revert;
background-attachment: revert-layer;
background-attachment: unset;
Die background-attachment-Eigenschaft wird als eines oder mehrere der Schlüsselwortwerte, getrennt durch Kommas, angegeben.
Werte
fixed-
Der Hintergrund ist relativ zum Ansichtsfenster fixiert. Selbst wenn ein Element einen Scrollmechanismus hat, bewegt sich der Hintergrund nicht mit dem Element. Falls festgelegt, wird die
background-origin-Eigenschaft ignoriert. local-
Der Hintergrund ist relativ zum Inhalt des Elements fixiert. Wenn das Element einen Scrollmechanismus hat, scrollt der Hintergrund mit den Inhalten des Elements, und der Hintergrundmalbereich und der Hintergrundpositionierungsbereich sind relativ zum scrollbaren Bereich des Elements und nicht zu dem sie umrahmenden Rand.
scroll-
Der Hintergrund ist relativ zum Element selbst fixiert und scrollt nicht mit dessen Inhalt. (Er ist praktisch am Rand des Elements befestigt.)
Formale Definition
| Anfangswert | scroll |
|---|---|
| Anwendbar auf | alle Elemente. Auch anwendbar auf ::first-letter und ::first-line. |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
background-attachment =
<attachment>#
<attachment> =
scroll |
fixed |
local
Beispiele
Einfaches Beispiel
HTML
Wir fügen eine ungeordnete Liste (<ul>) mit einigen Listenelementen (<li>) ein.
<ul>
<li>One fish</li>
<li>Two fish</li>
<li>Red fish</li>
<li>Blue fish</li>
<li>Black fish</li>
<li>Blue fish</li>
<li>Old fish</li>
<li>New fish.</li>
<li>This one has a little star.</li>
<li>This one has a little car.</li>
<li>Say! What a lot</li>
<li>Of fish there are.</li>
</ul>
CSS
Wir definieren ein background-image und setzen background-attachment auf fixed. Wir fügen auch height, width und overflow hinzu, um sicherzustellen, dass das Element scrollt.
ul {
background-image: url("star-solid.gif");
background-attachment: fixed;
width: 300px;
height: 70px;
overflow: scroll;
}
Ergebnis
Beachten Sie, wie der Hintergrund relativ zum Ansichtsfenster der Liste fixiert bleibt, wenn Sie den überflüssigen Text in den sichtbaren Bereich scrollen.
Mehrere Hintergrundbilder
Diese Eigenschaft unterstützt mehrere Hintergrundbilder. Sie können für jedes Hintergrundbild ein anderes <attachment> angeben, durch Kommas getrennt. Jedes Bild wird mit dem entsprechenden <attachment>-Typ von erstem zu letztem spezifizierten verknüpft.
HTML
Wir fügen das gesamte Gedicht von Dr. Seuss ein.
<div>
<ul>
<li>One fish</li>
<li>Two fish</li>
<li>Red fish</li>
<li>Blue fish</li>
<li>Black fish</li>
<li>Blue fish</li>
<li>Old fish</li>
<li>New fish.</li>
<li>This one has a little star.</li>
<li>This one has a little car.</li>
<li>Say! What a lot</li>
<li>Of fish there are.</li>
<li>Yes. Some are red. And some are blue.</li>
<li>Some are old. And some are new.</li>
<li>Some are sad.</li>
<li>And some are glad.</li>
<li>And some are very, very bad.</li>
<li>Why are they</li>
<li>Sad and glad and bad?</li>
<li>I do not know.</li>
<li>Go ask your dad.</li>
<li>Some are thin.</li>
<li>And some are fat.</li>
<li>The fat one has</li>
<li>A yellow hat.</li>
<li>From there to here, from here to there,</li>
<li>Funny things</li>
<li>Are everywhere.</li>
</ul>
<p>--Dr. Seuss</p>
</div>
CSS
Wir fügen eine height, width und overflow auf dem übergeordneten <div> hinzu, um sicherzustellen, dass die Inhalte scrollen.
Wir definieren zwei durch Komma getrennte Hintergrundbilder auf der Liste und setzen background-attachment auf fixed, scroll, was bedeutet, dass das erste Hintergrundbild fixiert und das zweite scrollt wird. Wir setzen die background-repeat, um beide Hintergrundbilder vertikal zu wiederholen, und trennen sie mit der background-position-Eigenschaft.
div {
width: 300px;
height: 200px;
overflow: scroll;
}
ul {
background-image: url("star-solid.gif"), url("star-transparent.gif");
background-attachment: fixed, scroll;
background-repeat: repeat-y;
background-position:
0 0,
100px 0;
}
Ergebnis
Beachten Sie, wie das erste Hintergrundbild am Ansichtsfenster fixiert ist, während das zweite Hintergrundbild relativ zur Liste fixiert ist.
Spezifikationen
| Spezifikation |
|---|
| CSS Backgrounds and Borders Module Level 3 # background-attachment |