CSS background and border label examples

Time:2021-7-21

1、 CSS background label

1. Set the background color

The back ground color property specifies the background color of the element.
A small example is shown in the figure below

在这里插入图片描述

The results are as follows

在这里插入图片描述

You can set different colors for different tags through the selector. Here, H1, div, and P tags will have different background colors
example:

在这里插入图片描述

The running results are shown in the figure below

在这里插入图片描述

2. Set the background image

The background image property specifies the image to be used as the background for the element. By default, the image repeats to cover the entire element. Use URL to introduce external image.
Specific examples are as follows:

在这里插入图片描述

The running results are as follows:

在这里插入图片描述

Note: when using the background image, pay attention to the style of the background image, do not interfere with the image of the text, so as not to affect the effect.

The problem of background repetition in CSS
By default, the background repeat property repeats the image both vertically and horizontally. Some images should be repeated only in horizontal or vertical direction. If you want to repeat only in horizontal direction, you need to use (background-repeat: repeat-x;), The background looks better; If you want to repeat the image only vertically, you need to set background-repeat: repeat-y;
Attribute can also specify that the background image is displayed only once: use the background repeat: no repeat tag.

4. Specifies the location of the background image

The background position tag is required to specify the location of the background image
The specific examples are shown in the figure below
The code to place the background image in the upper right corner is shown below

在这里插入图片描述

The running results are shown in the figure below

在这里插入图片描述

5. Set background image fixation

The background attachment property is used to fix the background image. The attribute value scroll image scrolls with the page elements (the default value). Fixed image is fixed on the screen and does not scroll with the page elements.

6. Set background image size

The background size property sets the height and width of the background image. The first value sets the width and the second value sets the height. If you set a value, the second value defaults to auto. The format is as follows:
Background size: attribute 1, attribute 2;
Examples are as follows:

在这里插入图片描述

The results are as follows

在这里插入图片描述

7. Set image transparency

The opacity attribute can make any element transparent. The transparency is between 0 and 1. The format is as follows:
opacity:opacityValue;

2、 CSS border label

1. Set the border color

(1) Set border style
Border style is used to define the style of border. The common attribute values are as follows:
None: without borders, the width of all borders is ignored (the default).
Solid: the border is a single solid line.
Dashed: the border is dashed.
Dotted: the border is dotted line.
Double: the border is a double solid line.
You can not only set one side of the box, but also set the style of four sides. When using the border style attribute to comprehensively set the four side style, it must follow the clockwise order of top right bottom left; The principle of value duplication is adopted when omitting, that is, one value is four sides; The two values are up and down / left and right; The three values are up / left / right / down.
Border top style: top border style
Border right style: right border style.
Border bottom style: bottom border style.
Border left style: bottom border style.
Border style: top border style right border style bottom border style left border style
Border style: top border style left and right border style bottom border style.
Border style: top and bottom border style, left and right border style.
Border style: top, bottom, left and right border style.
(2) Set border width
The border width property sets the width of the border in the following format
Border width: top [right, bottom, left];
In the above syntax format, the border with attribute usually takes the unit px. In addition, it also follows the principle of value copying, and its attribute values can be set to 1-4, that is, one value is four sides, two values are up / down / left / right, three values are up / left / right / down, and four values are up / right / down / left. The details are as follows:
Border top width: the width of the top border
Border right width: the width of the right border.
Border bottom width: the width of the bottom border.
Border left width: the width of the bottom border.
Border width: top border width, right border width, bottom border width, left border width
Border width: the width of the top border, the width of the left and right border, and the width of the bottom border.
Border width: the width of the upper and lower borders, the width of the left and right borders.
Border width: the width of the top, bottom, left and right borders.
(3) Set border color
The border color attribute is used to set the border color. The format is as follows:
Border color: top [right, bottom, left];
The border style must be set when setting the border style. If the style is not set or set to none, other border properties are invalid. The single side and comprehensive settings of border color are in clockwise order, which are the same as the setting rules of width and style attributes above. We will not describe them one by one here.
(4) Comprehensive setting border
Border top: top border width style color.
Border reight: right border width style color
Border bottom: bottom border width style color
Border left: left border width style color
Border: four side width style color
(5) Rounded border
The border radius attribute is used to add a rounded border to an element:
The syntax format is as follows:
Border radius: parameter 1 / parameter 2
Among them, “parameter 1” represents the horizontal radius of the fillet, “parameter 2” represents the vertical radius of the fillet, and the two parameters are separated by “/”. It should be noted that when using the border raidius attribute, if the second parameter is omitted, it will be equal to the first parameter by default. Use border radius to set the border fillet.

So far, this article about CSS background and border tag summary is introduced here. For more relevant CSS background and border content, please search previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!