**1, * * background color
- Attribute name: background color
- Function: add background color decoration in the box area
- Loading area: load the background color within the border
- Attribute value: color name, color value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
padding: 30px;
border: 5px dashed red;
margin: 20px;
background-color: slateblue;
}
</style>
</head>
<body>
<div class="box"> background color </div>
</body>
</html>
2, Background image
- Attribute name: background image
- Function: add background decoration to the box
- Loading range: the default loading range is within the border. In the later stage, if the image is not loaded repeatedly, the loading starts from within the border
- Attribute value: URL (picture path)
- url: uniform resource locator, uniform resource locator. The path to find the picture is written inside the parentheses
.box {
width: 200px;
height: 200px;
padding: 30px;
border: 5px dashed red;
margin: 20px;
/* background-color: slateblue; background color */
background-image: url(images/lagouwang.jpg);
}
- If the picture is not repeated, load it from within the border
- The background image and background color can be set at the same time. The background image will cover the background color, and the area without background image will display the background color
3, Background repeat
- Attribute name: background repeat
- Function: set whether the added background image should be loaded repeatedly in the box
- According to different attribute values, there are four repeated loading methods
|Attribute value | function|
|Repeat | repeat, the default attribute value, indicates that the background image will be repeatedly loaded to fill the whole box background area|
| no- repeat | no repetition. The picture is loaded only once whether the background image is larger than the box range or not|
| repeat- - x | repeat horizontally. Use the background picture to repeat the loading horizontally and spread the first line. The vertical direction is not repeated|
| repeat- - y | repeat vertically. Use the background picture to load vertically and repeatedly and spread the first column without repetition in the horizontal direction|
.box {
width: 200px;
height: 200px;
padding: 30px;
border: 5px dashed red;
margin: 20px;
/* background-color: slateblue; background color */
background-image: url(images/lagou_small.jpg);
/* background-repeat: repeat; */
/* background-repeat: no-repeat; */
/* background-repeat: repeat-x; */
background-repeat: repeat-y;
}
4, Background position
- Attribute name: background position
- Function: mainly used to set the loading start position of non repeated pictures in the background area
- Attribute value: it can be written in three ways: word representation, pixel representation and percentage representation. Either way
- There are two attribute values, separated by spaces
- The first attribute value: indicates the position of the background picture in the horizontal direction
- The second attribute value: indicates the position of the background picture in the vertical direction
① . word representation
- Attribute values are written with words representing directions
- Optional words in horizontal direction: left, center, right
- Vertical optional words: top, center, bottom
- The word indicates that the picture is aligned in the corresponding direction with the background area of the box
background-position: right bottom; /* Align in the corresponding direction */
② . pixel representation
- Use pixel values as attribute values for background positioning
- The first attribute value: the number of pixels, which indicates the horizontal displacement distance of the upper left corner of the background picture to the upper left vertex within the border
- The second attribute value: the number of pixels, which indicates the vertical displacement distance of the upper left corner of the background picture to the upper left vertex within the border
background-position: 50px 50px;
Pixel values are positive and negative, and positive and negative represent different displacement directions:
- Positive number: indicates that the picture moves to the right and down from the origin of the box
- Negative number: indicates that the picture moves to the left and up towards the origin of the box
Percentage notation uses percentage numbers as attribute values
- Value represented by 100%:
- Horizontal direction, equivalent to the width of the background area within the border of the box minus the width of the picture
- The vertical direction is equivalent to the height of the background area within the border of the box minus the height of the picture
5, Background attachment
- Attribute name: background attachment
- Function: set whether the background picture should scroll with the page or box. Attribute value
|Attribute value | description|
|scroll | scrolling indicates that the relative position between the background picture and the box remains unchanged and rolls away with the page scrolling|
|Fixed | the reference point for the positioning of the background image changes from the upper left vertex within the box border to the upper left vertex of the browser window. When the page scrolls, the upper left vertex of the browser window remains unchanged, resulting in the background image fixed at a certain position of the browser window and will not roll away with the page scrolling|
6, Comprehensive writing background
- The background attribute can write the values of five single attributes together
- Attribute value: there can be 1-5 attribute values separated by spaces. The two attribute values located in the background are counted as one attribute value and cannot be separated or reversed. The five attribute values can be interchanged
body {
background: url(images/bj.jpg) no-repeat center top scroll #666;
}
matters needing attention:
**① , * * if the attribute value is not set completely, other single attributes that are not set will be loaded according to the default value
background: pink;
② If you want to cascade some of the comprehensive attributes and keep other attributes unchanged, you'd better use the single attribute writing method to cascade
body {
background: url(images/bj.jpg) no-repeat center top #666;
background-attachment: scroll;
}
7, Background application
① Replace and insert diagram
- h1 tag is the tag with the highest weight. It usually writes the most important content inside, such as logo image, the largest title, etc
- in addition
Internal text can help improve SEO search ranking
- When the logo image is set, the search keyword cannot be written if the insert image is used
<h1>
<a href=""><img src="images/lagouwang.jpg"> </a>
</h1>
Background image replacement insertion method
- If you want to solve the SEO problem, you can replace the insertion diagram with search keywords in the HTML structure, and then use css to add a background diagram to the tag or tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
h1 {
width: 200px;
height: 100px;
}
h1 a {
display: block;
width: 200px;
height: 100px;
background: url(images/lagou_small.jpg) no-repeat;
}
</style>
</head>
<body>
<h1>
<a href=""> today|sun|splendid|666 </a>
</h1>
</body>
</html>
Text hiding method
1. Set the font size to 0. IE8 and above browsers can hide text, but IE7 and below have compatibility problems
font-size: 0;
2. You can set a text indent attribute to the label. If the attribute value is a large negative value, the text will go to the outside of the box and directly set the overflow hiding attribute to hide the overflow text
h1 a {
display: block;
width: 200px;
height: 100px;
background: url(images/lagou_small.jpg) no-repeat;
/* font-size: 0; */
text-indent: -20em;
overflow: hidden;
}
② Background map of padding area
- There is a background image part in a box, and there is text content. The text will be loaded away from the background image area. The background area should use padding to extrude the position
- padding in all four directions can be used to add background images
.list {
width: 300px;
padding-left: 10px;
border: 1px solid #000;
margin: 10px;
list-style: none;
font: 16px/32px "Regular script"
}
.list li {
padding-left: 25px;
background: url(images/tubiao.png) no-repeat left center ;
}
③ . sprite graph technology
- When users visit a website, they need to send a request to the server. Each image on the web page can be displayed to users only after one request
- However, a web page often uses many small background images as decoration. When there are too many images in the web page, the server will frequently accept and send requests, which will greatly reduce the loading speed of the page
- In order to effectively reduce the number of requests received and sent by the server and improve the loading speed of the page, CSS sprite Technology (also known as CSS Sprites and CSS Sprite) appears
css Wizard
- CSS sprites are a way to process web page background images
- It gathers all the sporadic background images involved in a page into a large picture, and then applies the large picture to the web page. In this way, when users visit the page, they only need to send a request to the service, and all the background images in the web page can be displayed
- Usually, this large image composed of many small background images is called sprite image
Technical basis of css Wizard
- Make the small background image needed in the web page into a png image with transparent background
- Using the background positioning technology, each small picture of the sprite image is loaded onto the corresponding label
Precautions for making sprite map
- The sprite pictures are all small decorative background pictures. The inserted pictures cannot be put up
- The width of the sprite image depends on the label width of the widest background image
- Sprites can be placed horizontally or vertically, but enough space must be left between each picture to ensure that there is no redundant content when the background picture is loaded into a label
- At the bottom of the sprite chart, try to leave a little blank to facilitate adding other sprite charts in the future
You can make sprite map online
8, CSS3 new background attribute
① . translucent background
- CSS3 supports the writing method of translucent background, and an rgba mode is added to the color value
- rgba mode: an opacity setting is added on the basis of rgb. The value range of opacity alpha is 0-1. 0 means fully transparent, 1 means fully opaque and 0.5 means translucent
- Writing method: RGBA (red, green, blue, opacity)
- Note: background translucency means that the box background is translucent, and the contents of the box are not affected
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
width: 100px;
height: 100px;
}
.p1 {
background-color: rgba(0, 255, 0, 1);
}
.p2 {
background-color: rgba(0, 255, 0, 0.5);
}
</style>
</head>
<body>
<p class="p1"> primary </p>
<p class="p2"> b translucent </p>
</body>
</html>
Similarly, you can make text and border transparent, which are written in rgba format
color: rgba(0,0,0,0.5); border: 1px solid rgba(0,0,0,0.5);
② Background size
Setting the size of the background image through the background size, just like the size we set, is widely used for screen adaptation in mobile Web development
|Attribute value | description|
|px value | 1 - 2 pixel values, set only 1 value, stretch in equal proportion in the vertical direction, set 2 values, and load according to the set value|
|Percentage | the same as the pixel value setting method. When setting the percentage, the value refers to the width and height attributes of the box|
|cover | automatically adjust the zoom scale and expand the background image to be large enough so that the background image completely covers the background area. If there is overflow, it will be hidden|
|contain | automatically adjust the zoom ratio, expand the image to the maximum size, and ensure that the image is always completely displayed in the background area|
.box1 {
background-size: 50px 50px;
}
.box2 {
background-size: 50% 50%;
}
.box3 {
background-size: cover;
}
.box4 {
background-size: contain;
}
<div class="box1"> px value </div>
<div class="box2"> percentage </div>
<div class="box3"> cover </div>
<div class="box4"> contain </div>
③ . multi background
- CSS3 stipulates that multiple background pictures can be added to a box
- When the attribute value of background image is written, the URL path addresses of multiple backgrounds are separated by commas
- Note: when loading the background, write the background picture first and then the background picture
background-image: url(images/pdx.jpg) ,url(images/lagouwang.jpg);
③ . multi background
- CSS3 stipulates that multiple background pictures can be added to a box
- When the attribute value of background image is written, the URL path addresses of multiple backgrounds are separated by commas
- Note: when loading the background, write the background picture first and then the background picture
background-image: url(images/pdx.jpg) ,url(images/lagouwang.jpg);
[external chain picture transferring... (img-hBwZggpU-1626922713789)]
**Finally: * * due to space constraints, the full version of the PDF document (including answer analysis) of the face-to-face examination questions of the school recruitment is required, You can click here for free