Posts in current category
May 03, 2021 21:00 CSS
CSS background properties are used to define the background of HTML elements.
The CSS property defines the background effect:
defines the background color of the element.
The background color of the page is used
In CSS, color values are typically defined as follows:
In the following examples,
elements have different background colors:
can set the background color for all elements,
up to em and
be inherited, and its default value is
If an element does not specify a background color, the background is transparent so that the background of its parent element is visible.
describes the background image of the element.
By default, the background image is tiled and repeated to cover the entire element entity.
Page background picture settings instance:
Here is an example of a poor combination of text and background images. Poor readability of text:
If you need to tile the background image on an HTML page, you can use
property is tiled horizontally or vertically on the page.
Some images look out of alignment if they are tiled horizontally and vertically, as follows:
The page background is better if the image is only tiled horizontally
Let the background image not affect the layout of the text
If you don't want the image tiled, you can
In the above example, the background image and text are displayed in the same place, in order to make the page layout more reasonable, does not affect the reading of the text, we can change the position of the image.
You can use
to change the position of the image in the background:
are many ways to provide values for
irst, you can use some keywords:
Different types of values differ slightly in the placement of background images.
Image placement keywords are most easily understood to work just as well as the meaning of their names.
the image in the upper-left corner of the margin area within the element.
As long as you guarantee no more than two keywords: one for horizontal direction and one for vertical direction, you can set the location keywords to appear in any order.
If there is only one keyword, the other keyword is center by
So if you want an image to appear above the middle of each paragraph, just declare the following:
Here are the equivalent location keywords:
|top||top center 或 center top|
|bottom||bottom center 或 center bottom|
|right||right center 或 center right|
|left||left center 或 center left|
Percentage values are more complex to represent. Suppose you want to center an image in its element with a percentage value, and you can set it up by following this code:
This causes the image to be placed appropriately, with its center aligned to the center of its element.
Therefore, if you want to place an image horizontally 2/3 and vertically 1/3, you can declare this:
The length value explains the offset in the upper-left corner of the element's margin area, which is the upper-left corner of the image.
For example, if you set the value to 50px 100px, the upper left corner of the image will be 50 pixels to the right in the upper left corner of the inner margin area of the element and 100 pixels down:
Note that this is different from the percentage value because the offset is only from one upper left corner to the other upper left corner.
That is, the upper-left corner of the image
point in the background-position declaration.
In the above example we can see that the background color of the page is controlled by a number of properties.
To simplify the code for these properties, we can combine them in the same property.
The short-case property of the background color is "background":
When short-case properties are used, the order of property values is:
The above properties do not need to be used in full, you can follow the actual needs of the page to use.
This instance uses the CSS described earlier, and you can view the instance: the CSS instance
How to set a fixed background image
This example shows how to set a fixed background image. The image does not scroll with the rest of the page.