Article Directory
Background-color
background-color:颜色值;
Under normal circumstances, the default value of the element background color is transparent (transparent) , we can also manually specify the background color as transparent.
Background-image
The background-image attribute describes the background image of the element. Actual development is often used in logos or some decorative small pictures or large background pictures . The advantage is that it is very easy to control the position. (Spirit pictures are also an application scenario)
background-image : none | url (url)
Background-repeat
background-repeat: repeat | no-repeat | repeat-x | repeat-y
Background-position
Use the background-position property to change the position of the picture in the background.
background-position: x y;
The meaning of the parameters are: x coordinate and y coordinate. You can use Nouns or exact unit
- Parameter is a position noun
- If the two specified values are both position nouns, the order of the two values is irrelevant. For example, left top and top left have the same effect
- If only one position noun is specified and the other value is omitted, the second value will be centered by default
- Parameters are precise units
- If the parameter value is an exact coordinate, then the first one must be the x coordinate, and the second one must be the y coordinate
- If only one value is specified, that value must be the x coordinate, and the other one is centered vertically by default
- Parameters are mixed units
- If the specified two values are a mixture of precise units and nouns, the first value is the x-coordinate and the second value is the y-coordinate
Case number one
Open the homepage of King Glory and draw the "Growth Guardian Platform" with the background image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
h3 {
font-size: 14px;
line-height: 40px;
width: 150px;
height: 40px;
text-indent: 4em;
background-image: url(image.png);
background-repeat: no-repeat;
background-position: left center;
}
</style>
<body>
<h3>成长守护平台</h3>
</body>
</html>
Effect:
Because the pictures crawled from the source code are a bit fascinating here, emmm may be different from the one on the interface
Background-attachment
The background-attachment property sets whether the background image is fixed or scrolls with the rest of the page.
Background-attachment can produce the effect of parallax scrolling later .
Background composition
In order to simplify the code of the background property, we can combine these properties and abbreviate them in the same property background. Thereby saving the amount of code.
When using abbreviated attributes, there is no specific writing order, the general convention is:
background: background color background picture address background tile background image scrolling background picture position;
background: transparent url(image.jpg) repeat-y fixed top ;
Background color translucent
background: rgba(0, 0, 0, 0.3);
- The last parameter is alpha transparency, the value range is between 0~1
- We are used to omit the 0 of 0.3 and write it as background: rgba(0, 0, 0, .3);
- Note: Translucent background means that the background of the box is translucent, and the content inside the box will not be affected
- CSS3 new properties are only supported by IE9+ browsers
- But now in actual development, we don't pay much attention to compatibility writing, and you can use it with confidence
to sum up
Background image: Actual development is often seen in logos or some decorative small images or large background images. The advantage is that it is very easy to control the position. (Spirit image is also an application scenario)
Case two-colorful navigation bar
Goal:
When the mouse is clicked, the navigation bar will also change color
Steps:
1. Since this is link a, it is an inline element, but obviously it needs to be resized and arranged in a row, so use display:inline-block
2. The text inside needs to be centered horizontally (text-align) and vertically (set line height) . Therefore, a code to vertically center a single line of text
is required . 3. A background image needs to be set in the link. Therefore, the related property setting of the background needs to be used.
4. The background image is changed by the mouse, so the link pseudo-class selector is required.
Be lazy here and made the first one:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.nav a{
display: inline-block;
width: 120px;
height: 58px;
background-color: pink;
text-align: center;
line-height: 50px;
text-decoration: none;
color: white;
}
.nav .pic1{
background: url(picture1.png) no-repeat;
}
.nav .pic1:hover{
background: url(picture2.png) no-repeat;
}
</style>
<body>
<div class="nav">
<a href="#" class="pic1">彩色导航</a>
<a href="#">彩色导航</a>
<a href="#">彩色导航</a>
<a href="#">彩色导航</a>
<a href="#">彩色导航</a>
</div>
</body>
</html>
Effect: When the
mouse is placed above the navigation bar, the color will change (cannot take a screenshot)