CSS background properties
The CSS background attribute is used to define the background of HTML elements.
CSS attribute defines the background effect:
background-color background color
background-image Background picture
background-repeat Background tile
background-attachment Background transparency
background-position Background position
1, Background color
The background color attribute defines the background color of the element
Syntax:
Background color: color value;
In CSS, color values are usually defined in the following ways:
- Hexadecimal - for example: "#ff0000"
- RGB - for example: "rgb(255,0,0)"
- Color name - e.g. "red"
Generally, the default value of element background color is transparent. We can also manually specify the background color as transparent.
<style>
div {
width: 300px;
height: 100px;
/* background-color: transparent; transparent; Limpid*/
background-color: pink;
}
</style>
</head>
<body>
<div></div>
</body>2, Background picture
The background image attribute describes the background image of the element. In actual development, it is common to use logo or some decorative small pictures or large background pictures, which is very convenient to control the position. (sprite diagram is also an application scenario)
Syntax: background image: none | url (url)
Where: none, no background image;
url: Specifying a background image using an absolute or relative path;
<style>
div {
width: 300px;
height: 300px;
/* Don't leave the url () */
background-image: url(images/logo.png);
}
</style>
</head>
<div></div>
</body>3, Background tile and position
1. Background tiling
By default, the background image property is tiled horizontally or vertically on the page.
If the picture is smaller than the box, the picture will be tiled horizontally or vertically in the box, which looks very inconsistent, so we need to set the tiling property of the background.
If you need to tile the background image on the html page, you can use the background repeat attribute.
Parameters:
repeat: the background image is tiled vertically and horizontally
No repeat: the background image is not tiled
repeat-x: the background image is tiled horizontally
repeat-y: the background image is tiled vertically
<style>
div {
width: 300px;
height: 300px;
background-image: url(images/logo.png);
/* The background picture is not tiled */
background-repeat: no-repeat;
/* By default, the background picture is tiled */
/* background-repeat: repeat; */
/* The background image is tiled horizontally */
/* background-repeat: repeat-x; */
/* The background image is tiled vertically */
background-repeat: repeat-y;
/* Page elements can be added with background color or background picture, but the background color is at the bottom */
}
</style>
</head>
<body>
<div></div>2. Background position
The added background is in the upper left corner of the box by default, so we need to adjust the position ourselves.
Using the background position attribute, you can change the position of the picture in the background
Syntax: background position: X Y;
The parameters represent x and y coordinates. You can use location nouns or precise units.
Parameter value: length Percentage | length value composed of floating-point number and unit identifier;
position top|center|bottom|left|center|right noun;
be careful:
1. Parameters are location nouns:
If the two specified values are both location nouns, the order of the two values is irrelevant, such as left top and top left;
If only one orientation noun is specified and the other is omitted, the second value is centered by default.
<style>
div {width: 300px;
height: 300px;
background-image: url(images/logo.png);
background-repeat: no-repeat;
/* The effects of center top and top center are equivalent */
/* background-position: center top; */
background-position: top center;
/* At this time, the horizontal must be aligned to the right. The second parameter is omitted, and the y axis is displayed vertically and centrally */
background-position: right;
/* At this time, the first parameter must be aligned with the top of the Y axis, and the second parameter omits the x axis, which is displayed horizontally and centrally */
background-position: top;
}
</style>
</head>
<body>
<div></div>2. Parameters are in exact units:
If the parameter is in exact units, the first one must be the x coordinate and the second one must be the y coordinate;
If you specify a parameter value, the parameter value must be the x coordinate, and the second parameter value is vertically centered by default.
3. The parameter is mixed unit:
If the two values specified are a mixture of exact units and azimuth nouns, the first value is the x coordinate and the second value is the y coordinate.
<style>
div {width: 300px;
height: 300px;
background-color: pink;
background-image: url(images/logo.png);
background-repeat: no-repeat;
/* x The axis is 20px and the y axis is 50px. The order cannot be changed */
background-position: 20px 50px;
/* 20px center It must be that x is 200px and Y is center, which is equivalent to background position: 20px */
/* background-position: 20px center; */
/* 20px center It must be x for center and y for 20px */
/* background-position: center 20px; */
}
</style>
</head>
<body>
<div></div>
</body>4, Fixing of background image (background attachment)
The background attachment property sets whether the background image is fixed or scrolls with the rest of the page;
Background attachment the parallax scrolling effect can be produced later.
Syntax: background attachment: scroll|fixed;
Parameter: scroll background image scrolls with object content (default);
Fixed background image fixed.
<style>
body {
background-image: url(images/bg.jpg);
background-repeat: no-repeat;
background-position: center top;
color: #fff;
/* Fix the background picture: */
background-attachment: fixed;
font-size: 20px;
}
</style>5, Background compound writing
In order to simplify the code of background attributes, we can combine these attributes and abbreviate them in the same attribute background, so as to save code.
When using the abbreviation attribute, there is no specific writing order, and the general customary order is:
Background: background color background picture address background tile background image scrolling background picture position;
<style>body {
/* background-image: url(images/bg.jpg);
background-repeat: no-repeat;
background-position: center top;
color: #fff;
/* Fix the background picture: */
/* background-attachment: fixed;
background-color: black;
font-size: 20px; */
background:black url(images/bg.jpg) no-repeat fixed center top;/*It has the same effect as the above*/
color: wheat;
}
</style>6, Background translucent
CSS provides us with the effect of translucent background color.
Syntax: background:rgba(0,0,0,0.3);
The last parameter is alpha transparency, which ranges from 0 to 1.
We habitually omit the 0 of 0.3 and write it as background: rgba(0,0,0,. 3)
Note: background translucency means that the box background is translucent, and the contents in the box are not affected;
CSS3 new attribute, which is only supported by IE9 + browser;
But now in actual development, we don't pay much attention to compatibility writing, so we can use it safely.
<style>
div {
width: 300px;
height: 300px;
/* background-color: black; */
background: rgba(0, 0, 0, 0.3);
}
</style>