Learn the front end from scratch: CSS background color - did you learn today? (Day09)
preface
Lesson 9: CSS background color
With CSS background properties, you can add background styles to page elements.
The background attribute can set the background color, background picture, background tile, background picture position and background image fixation.
1, Background color
The background color attribute defines the background color of the element.
Generally, the default value of element background color is transparent. We can also manually specify the background color as transparent.
Syntax:
Background color: color value (red / #000 / RGB (255255255))
example:
html file:
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus ullam maxime alias quaerat quisquam voluptates, aliquam inventore expedita saepe labore maiores, repellat sint unde, animi minus tempora rem tenetur eveniet?
</div>
css file:
div{
background-color: #999;
}
design sketch:
2, A Background color translucent
background:rgba(0,0,0,0.3);
- The last parameter is aipha transparency, which ranges from 0 to 1
- We are used to omitting 0 of 0.3 and writing it as background: rgb (0,0,0,. 3);
- Note: background translucency means that the box background is translucent, and the contents of the box are not affected
- CSS3 adds a new attribute, which is only supported by IE9 + browsers
- But now we don't pay much attention to the compatibility writing method in actual development, so we can use it safely
example:
html file:
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus ullam maxime alias quaerat quisquam voluptates, aliquam inventore expedita saepe labore maiores, repellat sint unde, animi minus tempora rem tenetur eveniet?
</div>
css file:
div{
background-color: rgb(233, 167, 167,.3);
}
design sketch:
3, Background picture
The background image attribute describes the background image of the element. The actual development is common in the logo or some decorative small pictures or large background pictures, which is very easy to control the position. (sprite image is also an application scene) (the position of background image is more accurate than that of inserted image)
Syntax:
- background-img；none|url(url)
- none indicates that there is no background image. It is the default. url specifies the background image using an absolute path or a relative path.
- background-size: 200px 150px; (cover covers my box)
- Set the size of the background picture. The front is the width and the back is the height
example:
html file:
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus ullam maxime alias quaerat quisquam voluptates, aliquam inventore expedita saepe labore maiores, repellat sint unde, animi minus tempora rem tenetur eveniet?
</div>
css file:
div{
height: 200px;
width: 500px;
background-color: rgb(233, 167, 167,.3);
background-image: url(./Connor 1.jpg);
}
design sketch:
4, Background tile
If you need to tile the background image on the HTML page, you can use the background repeat attribute. The default is tiling.
Syntax:
- background-repeat:repeat | no-repeat | repeat-x | repeat-y
- Four attributes: tiling, non tiling, tiling along the X axis, and tiling along the Y axis
example:
html file:
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus ullam maxime alias quaerat quisquam voluptates, aliquam inventore expedita saepe labore maiores, repellat sint unde, animi minus tempora rem tenetur eveniet?
</div>
CSS file:
div{
background-color: rgb(233, 167, 167,.3);
}
body{
background-image: url(./Connor 1.jpg);
background-repeat: repeat;
/* background-repeat: no-repeat; */
/* background-repeat: repeat-x; */
/* background-repeat: repeat-y; */
}
design sketch:
Repeat: tile X / y evenly
No repeat: left and right are not tiled
repeat-x:x tile
repeat-y:y tile
5, Background picture location
The background position attribute can be used to 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 | explain |
|---|---|
| length | User defined length, which can be either a percentage or a unit identifier |
| position | top | center | bottom | left | center | right |
When the parameter is in exact units:
If the parameter value is an exact coordinate, the first must be an x coordinate and the second must be a y coordinate.
If only one value is specified, the value must be the x coordinate, and the other is centered vertically by default.
When the parameter is a location noun: (right, left, center)
If both specified values are location nouns, the sequence of the two values is irrelevant. For example, the effects of left top and top left are the same.
If only one orientation noun is specified and the other value is omitted, the second value is centered by default.
When 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.
example:
CSS file:
div{
background-color: rgb(233, 167, 167,.3);
}
body{
background-image: url(./Connor 1.jpg);
background-repeat: no-repeat;
background-position: 15px 15px;
}
design sketch:
You can see that there are gaps on the left and at the top.
6, Fixed background picture
The background attachment property sets whether the background image is fixed or scrolls with the rest of the page.
Syntax:
background-attachment:scrroll l fixedcss
| parameter | effect |
|---|---|
| scroll | The background image scrolls with the object content |
| fixed | Background image fixation |
example:
CSS file:
div{
height: 900px;
width: 500px;
background-image: url(./Connor 1.jpg);
background-repeat: no-repeat;
background-position: 15px 15px;
/* background-attachment: fixed; */
background-attachment: scroll;
}
design sketch:
fixed:
The picture position does not change, and the font changes with the scroll wheel
scroll:
The picture follows the font up:
7, Background compound writing
In order to simplify the code of background attributes, we can combine these attributes and abbreviate them in one attribute background. This saves 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 scroll background picture position.
background:transparent url(image.ipg) repeat-y fixed top;
be careful:
Background compound writing has no sequence requirements, but other attribute values cannot be written between two positions.
example:
CSS file:
div{
background: palegoldenrod url(./Connor 1.jpg) scroll bottom ;
height: 800px;
}
design sketch:
The picture will go up with the text, and then the picture position is bottom, so the upper space and left space will be tiled when they are redundant
Preview: TBD
------A thousand words, learn from the beginning.