Proficient in CSS + DIV webpage style and layout-page background, cssdiv

Proficient in CSS + DIV webpage style and layout-page background, cssdiv

In the previous blog, we briefly summarized the image effects of CSS. Here we will talk about how CSS sets the background of a webpage. The background of a webpage is an important part of the entire webpage, she directly decides the style and tone of the entire webpage. This blog briefly summarizes how to use CSS to set the background color and background image. First, let's look at a figure:

Next, the editor will explain each knowledge point in detail along with the context of the above Mind Map. First, let's look at the page background color. The example code and running effect are as follows:

Page background color

<Span style = "font-size: 18px;"> <span style = "font-size: 18px; "> The running effect is as follows:


CSS is particularly easy to set the background color: background-color, which adopts the hexadecimal design method. The background color not only sets the background color for the webpage, but also blocks the webpage. Next we will see that we use the background color to block the page. The example and Code are as follows:
Use the background color to block the page

<Span style = "font-size: 18px;"> <span style = "font-size: 18px; "> The running effect is as follows:


By analyzing the code above, we can see that we have used table in the whole body for partitioning, and we can see the above display effect. Here we also need to say that, we didn't set the color for the body in the Code. However, we set the color in topbanner and leftbanner, so if we didn't set the color, we inherited the body, if this parameter is set, it overwrites the original one. Through the background color and block the entire web page, you can achieve a good typographical effect. CSS not only sets the background color of the page, but also adds images to the background. Let's take a look at the sample code and running effect:
Page background
<Span style = "font-size: 18px;"> The running effect is as follows:


From the effect of the last hour, we can see that this small image is filled with this page in both the horizontal and vertical directions. Isn't it very beautiful, nie? The Legend of the five secrets represents self-confidence and strength, I hope that my friends who have seen this blog post will be brave and brave in the new year. No matter what difficulties we encounter, we just saw a small picture repeat to cover the whole page, but if we don't want to repeat it like this, how should we set it? See the following example and code:
Duplicate background image
<Span style = "font-size: 18px;"> The running effect is as follows:


If we set background-repeat to repeat-x, what kind of surprise will happen to us? You can try it on your own. We just saw a duplicate of the background image, if we want to change the X axis or Y axis from the upper left corner, how should we set it? Next, let's look at the position of the background image, the sample code and running effect are as follows:
Location of the background image
<Span style = "font-size: 18px;"> The running effect is as follows:


By setting the background of an image, you can use some large images as the background of the entire webpage, and the text is above. We can see that the relative position of the background image and text is fixed, and the image is moved together. How should we set a fixed background image? Let's take a look at the example below and the running effect:
Fixed background image
<Span style = "font-size: 18px;"> The running effect is as follows:


The background-attachment: fixed in the code will fix the background image. when the text is moved, the background image will not move with the image.
Small message: In this blog post, I briefly summarized the knowledge of setting the page background, followed by the page background, and used the background color to block the page. The page background and background images are repeated, the position of the background image and the fixed background image, where the background color is used to block the page and the table is used in the whole body. The above display effect is displayed, here we also need to say that we didn't set the color for the body in the code, but we set the color in topbanner and leftbanner, therefore, if no color is set, the system inherits the body and overwrites the original one. Through the background color and block the entire web page, you can achieve a good typographical effect. BS Learning To be continued ......