CSS background
Through the css background property, you can add background styles to page elements.
Background properties can set background color, background image, background tile, background image position, background image fixed, etc.
background color
The background-color attribute defines the background color of the element
structure:
background-color:color value;
Under normal circumstances, the default value of the background color of an element is transparent (transparent), and we can also manually specify the background color as a transparent color.
Background picture
The background-image attribute describes the background image of the element. The actual development is often seen in logo s or some decorative small pictures or super-large background pictures. The advantage is that it is very convenient to control the position. (The sprite map is also an application scenario)
structure:
background-image: none｜url(url The map's address)
background tiling
If you need to tile the background image on the HTML page, you can use the background-repeat property
structure:
Tiled, not tiled, tiled along the x-axis, tiled along the y-axis.
background-repeat: repeat｜no-repeat｜repeat-x｜repeat-y
background image location
Use the background-position property to change the position of the image in the background.
background-position:x y;
x and y refer to coordinates. Placement nouns or precise units can be used.
1. Parameters are positional nouns
If the two specified values are both orientation nouns, the order of the two values is irrelevant, for example, left top and top left have the same effect
If only one location noun is specified and the other value is omitted, the second value is center-aligned by default
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css background image exercise</title>
<style>
div {
width: 900px;
height: 900px;
background-color: pink;
background-image: url(Happy New Year.png);
background-repeat: no-repeat;
background-position: center top;
}
</style>
</head>
<body>
<!-- put a box -->
<div></div>
</body>
</html> 2. Parameters are exact units
If the parameter value is an exact unit, then the first must be the x coordinate, and the second must be the y coordinate
background-position:50px 20px; no the same background-position:20px 50px;
If only one value is specified, the value must be the x coordinate, and the other is vertically centered by default
3. Parameters are mixed units
If the two values specified are a mixture of exact units and orientation nouns, the first value is the x-coordinate and the second is the y-coordinate
background-position:20px center; no the same background-position:center 20px;
Background image fixed (background attached)
The background-attachment property sets whether the background image is fixed or scrolls with the rest of the page.
The effect of parallax scrolling can be produced in the later stage of background-attachment.
structure:
background-attachment: scroll or fixed;
parameter | effect |
scroll | The background image is scrolled with the object content |
fixed | background image fixed |
For example:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css background image exercise</title>
<style>
body {
/* width: 900px;
height: 900px; */
background-color: #fff;
background-image: url(Happy New Year.png);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
font-style: 20px;
}
</style>
</head>
<body>
<!-- put a box -->
<!-- <div></div> -->
<p> Happy New Year</p>
<p> Happy New Year</p>
<p> Happy New Year</p>
<p> Happy New Year</p>
<p> Happy New Year</p>
<p> Happy New Year</p>
<p> Happy New Year</p>
<p> Happy New Year</p>
<p> Happy New Year</p>
<p> Happy New Year</p>
<p> Happy New Year</p>
<p> Happy New Year</p>
<p> Happy New Year</p>
<p> Happy New Year</p>
<p> Happy New Year</p>
<p> Happy New Year</p>
<p> Happy New Year</p>
<p> Happy New Year</p>
<p> Happy New Year</p>
<p> Happy New Year</p>
<p> Happy New Year</p>
<p> Happy New Year</p>
<p> Happy New Year</p>
<p> Happy New Year</p>
<p> Happy New Year</p>
<p> Happy New Year</p>
<p> Happy New Year</p>
<p> Happy New Year</p>
<p> Happy New Year</p>
<p> Happy New Year</p>
<p> Happy New Year</p>
<p> Happy New Year</p>
<p> Happy New Year</p>
<p> Happy New Year</p>
<p> Happy New Year</p>
<p> Happy New Year</p>
<p> Happy New Year</p>
</body>
</html>Background composite writing
In order to simplify the code of the background property, we can combine these properties into the same property background to save code.
There is no specific order for writing, and the general customary order is:
background:Background color Background image address Background tiling Background image scrolling Background image position;
background color translucent
CSS3 provides us with the effect of translucent background color.
background: rgba(0,0,0,0,0.3);
The last parameter is alpha transparency, which ranges from 0 to 1.
We are used to omit the 0 of 0.3 and write background: rgba(0,0,0,.3);
Note that background translucency refers to making the background of the box translucent, and the content in the box will not be affected.
CSS3 new properties are only supported by IE9+ browsers, and you can use them with confidence now.
background summary
