HTML sets the background color and background image

background color

backgroud-color:transparent color

transparent : the background color is transparent color : specify the background color

Directly set the style attribute of the label (inline style)

Example: Set the background of this paragraph to red

Set with a selector (embedded style, external link style)

Example (inline tags with inline styles):

There are four ways to express the color: (directly write the color word, #+hexadecimal number, rgb(x,x,x), rgba(x,x,x,x) the last digit represents the transparency of the color)

Example: Four ways of expression (left floating is added to the div box)

    .boxThree>div{
        float: left;
    }
   
  </style>
  <body>
  
<div class="boxThree">
    <div style="background-color:red; width: 40px;height: 40px;">1</div>
    <div style="background-color:rgb(255,255,20) ;width: 40px;height: 40px;">2</div>
    <div style="background-color:#f0f ;width: 40px;height: 40px;">3</div>
    <div style="background-color:rgba(255, 0, 0, 0.5);  width: 40px;height: 40px;">4</div>
</div>
  </body>

Effect:

Background picture:

background-img :url(): Import image
background-repeat : tiling method (repeat (default) tiles on both the x-axis and y-axis, repeat-x fills repeatedly along the x-axis direction, repeat-y repeatedly fills along the y-axis direction, no-repeat does not repeat )

Style effects: repeat-x/repeat-y/ no-repeat

background-size : Image size (width and height (set specific value or Auto), cover covers the entire box, may overflow, contain covers the screen as much as possible without overflowing )

Style effect: Set the width and height by yourself (this rendering is set to be as wide as the container, and the height is automatic) /cover/ contain

background-position : length/position background image positioning (x-axis and y-axis are used to adjust the position of the background image or display a certain position)
If only one value is specified, that value will be used for the abscissa. The vertical axis will default to 50%. The second value is the ordinate. The value can be written in English, numbers, or negative numbers . The positioning of this property is not affected by the setting of the padding property .

Style effect: 100%/position (upper right word writing)/position digital writing (example for Sprite image)

Background background composite property {combine the above pictures and background together}

background : background-color ||background-image ||background-repeat ||background-position

background-color You don't need to set the background color when setting the background image (you can also set it if necessary)

background-attachment: fixer image fixation (generally used when the background image is set for a long web page, the image is fixed and does not scroll with the scroll bar)

The example picture comes from the Internet. If there is any infringement, please contact the author to delete it. Thank you