Hintergrund-Wünsche

DiebackgroundEigenschaft ist ein wichtiger Faktor dafür, was heute die großartigen CSS-Designs ermöglicht. Es gibt nur wenige Eigenschaften, die sie ausmachenbackground-color, background-image, background-position, background-repeat, undbackground-attachment. Sehr einfach, sehr mächtig. Ich habe ein paar andere Ideen, die mir sinnvoll erscheinenbackground-opacityundbackground-anchor.

Was wir jetzt haben

• background-color: Eine Volltonfarbe als Hintergrund mit Schlüsselwörtern, Hex-Codes, RGB oder RGBA festlegen.
• background-image: Ein einzelnes Bild für den Hintergrund angeben.
• background-position: Verschiebt die Position des Hintergrunds, sodass er bündig oben oder unten, links oder rechts oder in der Mitte von beiden liegt. Oder ein spezifischer Offset von der oberen linken Ecke.
• background-repeat: Wenn ein Bild als Hintergrund festgelegt ist und das Bild kleiner ist als der sichtbare Bereich des Elements, legt diese Eigenschaft fest, ob sich dieses Bild horizontal (repeat-x), vertikal (repeat-y), beides (repeat) oder gar nicht (no-repeat) wiederholen soll.
• background-attachment: Dies legt fest, ob der Hintergrund des Elements normal (scroll) an das Element angehängt wird oder an die Seite selbst (fixed).

Was wir in CSS3 bekommen

CSS3 bringt mehrere Hintergründe. Mit anderen Worten, die Angabe verschiedener Bilder, die auf einem einzigen Element verwendet und an verschiedenen Stellen positioniert werden. Einfache und leistungsstarke Dinge. Stellen Sie sich einZitatboxvor, bei der Sie ein Bild eines öffnenden Zitats oben links und ein Bild eines schließenden Zitats unten rechts verwenden möchten. Normalerweise müssten Sie ein zusätzlichesdivinnendrin verwenden und jedem einen Hintergrund zuweisen. In CSS3 nicht mehr nötig

background:
         url(images/openquote.png) top left no-repeat,
         url(images/closequote.png) bottom right no-repeat;

Mehrere Hintergründe funktionieren in den neuesten WebKit-Browsern (Chrome & Safari), Firefox 3.6+ und Opera 10.5+.

CSS3 bringt auchbackground-originundbackground-clip. Beide dieser Eigenschaften befassen sich damit, wie das Box-Modell im Verhältnis zum Hintergrund verwendet wird. Typischerweise bedeckt ein Hintergrundbild den Padding, aber nicht den Border. Wenn Sie also einen 10px unteren Rand und 100px unteren Padding haben, befindet sich der Hintergrund in den 100px Padding, aber nicht in den 10px Border.background-originLegt fest, wo genau sich die „obere linke“ Ecke befinden soll (Oberseite des Inhalts, Oberseite des Rahmens oder Oberseite des Paddings).background-clipLegt fest, wo der Hintergrund stoppen soll (ebenfalls Rahmen, Padding oder Inhalt). Die Werte für beide sindpadding-box, border-box, odercontent-box.

Was ich cool fände

background-opacity: 0,0 – 1,0

Diese Einstellung würde die Transparenz des Hintergrunds ändern (0 bedeutet vollständig transparent, 1 bedeutet vollständig opak). Dies würde einen Volltonhintergrund, ein Bild oder eine Kombination aus beidem beeinflussen. Wir können bereits Hintergrundfarben in RGBA festlegen und wir können bereits alpha-transparente Hintergrundbilder verwenden, daher scheint dies auf den ersten Blick keine große Ergänzung zu sein. Aber die Möglichkeit, die Transparenz eines Hintergrundbildes auf CSS-Ebene festzulegen, würde es uns ermöglichen, diese Ebene über JavaScript oder mit neuen CSS-Übergängen zu animieren. Zum Beispiel könnten Sie ein rotes Ausrufezeichen-Grafik auf Formular-Labels ein- und ausblenden, indem Sie einfach einen background-opacity-Level anpassen, anstatt ein zusätzliches Element dafür zu benötigen. Denken Sie auch an das Vorladen. Ein Hintergrundgrafik aufbackground-opacity: 0;setzen würde das Bild beim Laden der Seite immer noch laden und wäre bereit, sofort angezeigt zu werden, wenn es benötigt wird.

background-anchor: anc-topleft | anc-topright | anc-bottomleft | anc-bottomright

Dies wäre eine Eigenschaft, die mit derbackground-positionEigenschaft gepaart wird. Wennbackground-anchorauf oben rechts gesetzt wäre undbackground-positionauf 10px 10px, würde diebackground-image10px von oben und 10px von rechts von der oberen rechten Ecke des Elements positioniert. Das ist derzeit nicht möglich. Sie können ein Hintergrundbild bündig oben/unten links/rechts oder in der Mitte von beiden platzieren, aber nicht in einem bestimmten Abstand von irgendwo außer der oberen linken Ecke.

Wennbackground-positionSchlüsselwörter verwenden würde,background-anchorwäre ignoriert.

Beachten Sie die seltsamen Namen für die Werte, wie z.B. „anc-bottomleft“. Mir ist bewusst, dass das seltsam ist und wahrscheinlich nicht die Art und Weise ist, wie es gemacht werden würde. Ich habe keine Standardoption wie „oben links“ angegeben, da dies mit denselben Schlüsselwörtern kollidieren würde, die mitbackground-positionin bei der Verwendung der Kurzschreibweise für Hintergrund verwendet werden.

Angeheftete Hintergrundbilder würden es erleichtern, zum Beispiel ein Hintergrundbild von unten nach oben eines Elements gleiten zu lassen, ohne zuerst Höhenberechnungen durchführen zu müssen.

Alles zusammen

background:
         white url(images/openquote.png) anc-topleft 10px 10px no-repeat 0.5,
         white url(images/closequote.png) anc-bottomright 10px 10px no-repeat 0.5;

Der obige Code ist rein hypothetisch und wird NICHT funktionieren.