This is the fifth day of my participation in the August More text Challenge. For details, see:August is more challenging

The CSS background property is used to define the background of an HTML element

Background-img: sets the background image

Background-image :url(relative path)

1. If the background image is larger than the element, the upper left corner of the image will be displayed by default

2. If the background image is the same size as the element, the entire image will be displayed

3. If the background image is smaller than the element, the background image is tiled to fill the element by default

Background-repeat: Sets the way the background image is repeated

Optional value:

  • Repeat: Default value, the image will be repeated in both directions
  • None-repeat: Only one image background will be displayed
  • Repeat -x: Background image is repeated in a horizontal direction
  • Repeat -y: The background image is repeated in the vertical direction

Background-position: Sets the position of the background image in the element

Optional value:

2, top left right bottom values

Example: background-position:top left

2. Specify two offsets directly

The first one is the horizontal offset.

If a positive value is specified, the image moves the specified pixels to the right

If a negative value is specified, the image moves the specified pixels to the left

The second is the vertical offset

If a positive value is specified, the image moves down by the specified number of pixels

If a negative value is specified, the image moves up by the specified number of pixels

Background-attachment: Sets whether the background image scrolls with the page

Optional value:

  • Scroll: The default value. The background image scrolls with the window
  • Fixed: The background image will be fixed in a certain position and will not scroll with the page

Note: Background images that do not scroll with the page are usually set to body and not to other elements *

Use the background image to set the color of the navigation bar

The code is as follows:

<! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ width: 990px; height: 32px; background-color: #bfa; margin: 50px auto; / / background-image: url(img/bg.gif); /* * set background-repeat: repeat-x; */ background-repeat: repeat-x; } </style> </head> <body> <div class="box1"></div> </body> </html>Copy the code

Operation effect:

​

If we find it too difficult to use a gradient in the navigation bar, we can just take a little bit of it as the background image and set it to x tile. Of course, this is only the case where we need to mimic the navigation bar of a web page.

Linear gradient

Gradients allow us to set some complex background colors, which allow us to transition from one color to another.

Note: The gradient is an image and needs to be set using background-image

Linear-gradient () : Sets the linear gradient

For example, linear gradient(red,yellow) indicates that red is at the beginning,yellow is at the end, and the transition region is in the middle.

At the beginning of a linear gradient, we can specify the direction of the gradient, optionally:

  • to left
  • to right
  • to top
  • to bottom
  • Or use deg (deg is an Angle value)

Gradients can specify multiple colors at the same time, which are evenly distributed by default, or you can specify the gradient distribution manually.

Set the color fade effect

CSS3 gradients also support transparency, which can be used to create a fading effect.

To add transparency, we use the rgba() function to define the color nodes. The last parameter in the rgba() function can be a value from 0 to 1, which defines the transparency of the color: 0 means completely transparent, 1 means completely opaque.

<! DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> <! Word-wrap: break-word! Important; "> <style>.box{width:300px; height:300px; border:1px solid #000; Background - image: linear - gradient (to the right, rgba (255,0,0,0), rgba (255,0,0,1)); } </style> </head> <body> <div class="box"></div> </body> </html>Copy the code

Code run effect:

​

Radial gradient

Radial gradient: set radial gradient (the effect of radioactivity)

By default, the shape of the radial gradient is calculated based on the shape of the element:

  • Element square -> Gradient circle
  • Element rectangle -> Gradient Oval

We can also manually specify the shape of the radial gradient, optionally:

  • Circle, circle
  • Ellipse: ellipse

You can also specify the location of the gradient, optionally:

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

Grammar:

background-image: radial-gradient(shape size at position, start-color, ... , last-color);Copy the code

​