background-attachment
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
* Some parts of this feature may have varying levels of support.
Die background-attachment CSS Eigenschaft legt fest, ob die Position eines Hintergrundbildes innerhalb des viewports fest 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 angegeben, getrennt durch Kommas.
Werte
fixed-
Der Hintergrund ist fest relativ zum Viewport. 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 fest relativ zum Inhalt des Elements. Wenn das Element einen Scroll-Mechanismus hat, scrollt der Hintergrund mit dem Inhalt des Elements, und der Bereich zum Malen des Hintergrunds und der Bereich zur Positionierung des Hintergrunds sind relativ zum scrollbaren Bereich des Elements statt zum umrandenden Rahmen.
scroll-
Der Hintergrund ist fest relativ zum Element selbst und scrollt nicht mit seinem Inhalt. (Er ist effektiv 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>) hinzu.
<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 fest relativ zum Viewport der Liste bleibt, wenn Sie den überfließenden 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 erst angegebenen bis zum letzten.
HTML
Wir fügen das gesamte Gedicht von Dr. Suess hinzu.
<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 height, width und overflow auf das übergeordnete <div> hinzu, um sicherzustellen, dass der Inhalt scrollt.
Wir definieren zwei durch Kommas getrennte Hintergrundbilder auf der Liste und setzen background-attachment auf fixed, scroll, was bedeutet, dass das erste Hintergrundbild fixed sein wird und das zweite scrollt. Wir setzen das background-repeat, damit beide Hintergrundbilder vertikal wiederholt werden 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 fest zum Viewport bleibt, während das zweite Hintergrundbild fest relativ zur Liste ist.
Spezifikationen
| Specification |
|---|
| 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