Χρώμα Φόντου CSS
- Προηγούμενη Σελίδα Δημιουργία CSS
- Επόμενη Σελίδα Κείμενο CSS
CSS allows the application of solid colors as background and also allows the use of background images to create quite complex effects.
CSS is far superior to HTML in this regard.
background color
You can use background-color propertySet the background color for the element. This property accepts any valid color value.
This rule sets the background of the element to gray:
p {background-color: gray;}
If you want the background color to extend a little outside the text within the element, just add some inner padding:
p {background-color: gray; padding: 20px;}
You can set a background color for all elements, including body all the way to inline elements such as em and a.
background-color cannot be inherited, and its default value is transparent. Transparent means 'transparent'. That is to say, if an element does not specify a background color, then the background is transparent, so that the background of its ancestor elements can be visible.
background image
To place an image in the background, you need to use background-image attribute.The default value of the background-image attribute is none, indicating that no image is placed on the background.
To set a background image, you must set a URL value for this attribute:
body {background-image: url(/i/eg_bg_04.gif);}
Most backgrounds are applied to the body element, but this is not limited to it.
The following example applies a background to a paragraph without applying a background to other parts of the document:
p.flower {background-image: url(/i/eg_bg_03.gif);}
You can even set a background image for inline elements. The following example sets a background image for a link:
a.radio {background-image: url(/i/eg_bg_07.gif);}
Theoretically, even the background of textareas and select elements can be applied with images, although not all user agents handle this situation well.
In addition, it should be noted that background-image cannot be inherited. In fact, all background properties cannot be inherited.
Background repetition
If you need to tile the background image on the page, you can use background-repeat attribute.
The value of the attribute repeat causes the image to tile horizontally and vertically, as is usually the case with background images. repeat-x and repeat-y cause the image to repeat only horizontally or vertically, while no-repeat does not allow the image to tile in any direction.
By default, the background image will start from the top left corner of an element. See the following example:
body
{
background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}
Background positioning
It can be used background-position attributeChange the position of the image in the background.
The following example centers a background image within the body element:
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position: center;
}
Many methods are available for providing values for the background-position attribute. First, some keywords can be used: top, bottom, left, right, and center. Usually, these keywords appear in pairs, although this is not always the case. Length values, such as 100px or 5cm, can also be used, and percentage values can be used as well. Different types of values slightly differ in the placement of the background image.
Κλειδιά
Τα κλειδιά τοποθέτησης εικόνας είναι πιο εύκολα κατανοητά, η δράση τους είναι όπως υποδηλώνει το όνομά τους. Για παράδειγμα，το top right τοποθετεί την εικόνα στο κάτω δεξί άκρο της περιοχής περιθωρίου του στοιχείου.
Σύμφωνα με τον κανόνα，οι κλειδιά θέσης μπορούν να εμφανίζονται σε οποιαδήποτε σειρά,只要你 βεβαιωθείς ότι δεν ξεπερνούν δύο κλειδιά - ένα για την οριζόντια κατεύθυνση και ένα για την κάθετη κατεύθυνση.
Αν εμφανίζεται μόνο ένα κλειδί，θα θεωρηθεί ότι το άλλο κλειδί είναι center.
Επομένως，αν θέλεις να εμφανίζεται μια εικόνα στην κεντρική άνω περιοχή κάθε παραγράφου，μπορείς να δηλώσεις ως εξής:
p
{
background-image:url('bgimg.gif');
background-repeat:no-repeat;
background-position:top;
}
Παρακάτω είναι τα ισοδύναμα κλειδιά θέσης:
| Μοναδικό κλειδί | Ανταλλακτικά κλειδιά |
|---|---|
| center | center center |
| top | top center ή center top |
| bottom | bottom center ή center bottom |
| right | right center ή center right |
| left | left center ή center left |
Οι ποσοστιαίες τιμές
Οι ποσοστιαίες τιμές έχουν πιο σύνθετη έκφραση. Αν θέλεις να τοποθετήσεις την εικόνα στο κέντρο του στοιχείου με ποσοστιαίες τιμές, είναι εύκολο:
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50% 50%;
}
Αυτό θα οδηγήσει στην κατάλληλη τοποθέτηση της εικόνας, με το κέντρο της να ταιριάζει με το κέντρο του στοιχείου.Με άλλα λόγια，οι ποσοστιαίες τιμές εφαρμόζονται και στο στοιχείο και στην εικόνα.Δηλαδή，το σημείο που περιγράφεται ως 50% 50% στην εικόνα (κέντρο) θα ταιριάζει με το σημείο που περιγράφεται ως 50% 50% στο στοιχείο (κέντρο).
Αν η εικόνα βρίσκεται στο 0% 0%，το αριστερό της άκρο θα τοποθετηθεί στο αριστερό άκρο της περιοχής περιθωρίου του στοιχείου. Αν η θέση της εικόνας είναι 100% 100%，θα τοποθετήσει το κάτω δεξί άκρο της εικόνας στο κάτω δεξί άκρο του περιθωρίου.
Επομένως，αν θέλεις να τοποθετήσεις μια εικόνα στο 2/3 του οριζόντιου και στο 1/3 του κάθετου, μπορείς να το δηλώσεις ως εξής:
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:66% 33%;
}
Αν παρέχεις μόνο έναν ποσοστό τιμή, η τιμή που παρέχεις θα χρησιμοποιηθεί ως οριζόντια τιμή, ενώ η κάθετη τιμή θα υποθέσει 50%. Αυτό είναι παρόμοιο με τα κλειδιά.
Η προεπιλεγμένη τιμή του background-position είναι 0% 0%，την οποία ισοδυναμεί με top left. Αυτό εξηγεί γιατί η εικόνα φόντου开始平铺于元素的内边距区的左上角，除非你设置了不同的位置值。
Length values
The length values explain the offset from the top-left corner of the padding area of the element. The offset point is the top-left corner of the image.
For example, if the value is set to 50px 100px, the top-left corner of the image will be 50 pixels to the right and 100 pixels down from the top-left corner of the padding area of the element:
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50px 100px;
}
Note that this is different from percentage values because the offset is only from one top-left corner to another top-left corner. That is, the top-left corner of the image aligns with the point specified in the background-position declaration.
Background Association
If the document is quite long, then when the document scrolls down, the background image will also scroll with it. When the document scrolls past the position of the image, the image will disappear.
You can use background-attachment propertyPrevent this scrolling. Through this property, you can declare that the image is fixed relative to the visible area (fixed), so it is not affected by scrolling:
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
The default value of the background-attachment property is scroll, which means that by default, the background will scroll with the document.
CSS Background Example
- Set the background color
- This example demonstrates how to set the background color for an element.
- Set the background color of the text
- This example shows how to set the background color of part of the text.
- Set the image as background
- This example demonstrates how to set the image as a background.
- Set the image as background 2
- This example demonstrates how to set a background image for multiple elements at the same time.
- How to repeat the background image
- This example demonstrates how to repeat the background image.
- How to repeat the background image vertically
- This example demonstrates how to repeat the background image vertically.
- How to repeat the background image horizontally
- This example demonstrates how to repeat the background image horizontally.
- How to display the background image only once
- This example demonstrates how to display the background image only once.
- How to place the background image
- This example demonstrates how to place the background image on the page.
- How to position the background image using %
- This example demonstrates how to use percentages to position the background image on the page.
- How to position the background image using pixels
- This example demonstrates how to use pixels to position the background image on the page.
- How to set a fixed background image
- This example demonstrates how to set a fixed background image. The image does not scroll with the rest of the page.
- All background attributes in one declaration
- Αυτό το παράδειγμα δείχνει πώς να χρησιμοποιήσετε την συντομευμένη ιδιότητα για να ρυθμίσετε όλες τις ιδιότητες φόντου σε μια μόνο διαclaration.
Ιδιότητες Φόντου CSS
| Ιδιότητα | Περιγραφή |
|---|---|
| background | Κυριολεκτική ιδιότητα, η οποία επιτρέπει τη ρύθμιση όλων των ιδιοτήτων φόντου σε μια μόνο διαclaration. |
| background-attachment | Αν η εικόνα φόντου είναι στατική ή κινείται με το υπόλοιπο της σελίδας. |
| background-color | Ρύθμιση του χρώματος φόντου του στοιχείου. |
| background-image | Ρύθμιση της εικόνας ως φόντου. |
| background-position | Ρύθμιση της αρχικής θέσης της εικόνας φόντου. |
| background-repeat | Ρύθμιση αν η εικόνα φόντου επαναλαμβάνεται και πώς. |
- Προηγούμενη Σελίδα Δημιουργία CSS
- Επόμενη Σελίδα Κείμενο CSS
