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 CSS Eigenschaft legt fest, ob die Position eines Hintergrundbildes innerhalb des Viewports fixiert ist oder mit seinem umgebenden 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 festgelegt, getrennt durch Kommas.
Werte
fixed-
Der Hintergrund ist relativ zum Viewport fixiert. Selbst wenn ein Element einen Scroll-Mechanismus hat, bewegt sich der Hintergrund nicht mit dem Element. Wenn gesetzt, wird die
background-originEigenschaft ignoriert. local-
Der Hintergrund ist relativ zu den Inhalten des Elements fixiert. Wenn das Element einen Scroll-Mechanismus hat, scrollt der Hintergrund mit den Inhalten des Elements, und der Bereich für die Hintergrundmalerei sowie der Hintergrundpositionierungsbereich sind relativ zum scrollbaren Bereich des Elements anstatt zum ihn umrahmenden Rand.
scroll-
Der Hintergrund ist relativ zum Element selbst fixiert und scrollt nicht mit dessen Inhalten. (Es 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
Grundlegendes 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 eine 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 Viewport der Liste fixiert bleibt, wenn Sie den überlaufenden Text in den Sichtbereich scrollen.
Mehrere Hintergrundbilder
Diese Eigenschaft unterstützt mehrere Hintergrundbilder. Sie können für jeden Hintergrund ein anderes <attachment> angeben, getrennt durch Kommas. Jedes Bild wird mit dem entsprechenden <attachment> Typ abgeglichen, vom zuerst angegebenen zum zuletzt angegebenen.
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 Kommas getrennte Hintergrundbilder auf der Liste und setzen background-attachment auf fixed, scroll, was bedeutet, dass das erste Hintergrundbild fixed und das zweite scroll sein wird. Wir setzen background-repeat, um beide Hintergrundbilder vertikal zu wiederholen, indem wir sie mit der background-position Eigenschaft trennen.
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 Viewport fixiert ist, während das zweite Hintergrundbild relativ zur Liste fixiert ist.
Spezifikationen
| Spezifikation |
|---|
| CSS Backgrounds and Borders Module Level 3 # background-attachment |
Browser-Kompatibilität
Siehe auch
- Die anderen
backgroundCSS Eigenschaften: - Verwendung mehrerer Hintergründe
- CSS Hintergründe und Rahmen Modul