Now the design of beautiful web pages in a wide variety of colors, beautiful background in the web page module is also a lot of color and background Settings are essential, next we will first learn how to express the color, to know, know why.

Color representation

1.RGB: RGB (red, green, blue) : Each parameter defines the color intensity between 0 and 255.

Example: RGB (0, 255) RGB (0, 0) / / / red/black RGB (255255255) / / whiteCopy the code

2.RGBA: RGBA (Red, Green, Blue, alpha) : Alpha is 0-1 transparency setting. 0 is completely transparent, 1 is opaque.

Example: RGB (255,0,0,0)// completely transparent, colorless red RGB (0,0,0,0.5)// translucent black RGB (255,255,255,1)// completely opaque whiteCopy the code

HSL (Hue, saturation, lightness) refers to the degree from 0 to 360. 0 is red, 120 is green, and 240 is blue. Saturation is a percentage value, where 0 indicates gray shadow and 100% is panchromatic. Lightness is a percentage value, where 0 is black, 50% is neither transparent nor dark, and 100% is white.

Example: an HSL (0, 100%, 50%) / / red an HSL (240100%, 50%) / / blue an HSL (240100%, 0%) / / black an HSL / / white (240100%, 100%)Copy the code

4.HSLA: HSLA (Hue, Saturation, lightness, alpha) : Alpha is 0-1 transparency setting. 0 is completely transparent, 1 is opaque.

Example: HSLA (0, 100%, 50%,0)// Fully transparent, colorless red HSLA (0, 100%, 50%,1)// redCopy the code

HEX: HEX uses a hexadecimal value to specify a color. The format is # RRGGBB, rr(red), gg(green). Bb (blue) is a hexadecimal value between 00 and ff.

For example: #ff0000 red # FFFF00 yellow # FFFFFF white, you can also combine two identical values, such as # FFF white #000 black

Color name: Tomato, orange, Gray

How do I set the background color

Use background or background-color when setting the background. Example: Setting a red background for a web page.

Body {background: red | # ff0000 RGB (0, 255) | | rgba (255,0,0,0) | an HSL (0100%, 50%)}Copy the code

or

Body {background - color: red | # ff0000 RGB (0, 255) | | rgba (255,0,0,0) | an HSL (0100%, 50%)}Copy the code

How to set the background image

Use the background or background-image property to set the background image. Example: a large background image for a web page.

-background-image :url("") /* Set the background image path (relative and absolute paths)*/ -background-repeat :repeat-x /* Whether the background image repeats, repeat-x horizontal direction repeat; Repeat -y repeats vertically; No-repeat; */ - background-position:0 0; /* Background image alignment, default is upper left corner; (100% 0) Set right top to upper right corner; Set right bottom to the lower right corner; (0 100%)left bottom set to bottom left; 0 0 (left top) set to the upper left corner; */ - background-attachment:fixed; /* The background image is fixed or scrolled. Fixed background; Scroll to follow the page */Copy the code

For example:

body{ background-color:red; /* Background-image :url("bg.jpg"); /* Background-image :url("bg.jpg"); /* Background-repeat :no-repeat; /* background-repeat:no-repeat; /* Background-attachment :fixed; /* background-position:center center; /* Center display */}Copy the code

Can also be abbreviated as:

body{
 background:red url("bg.jpg") no-repeat fixed center center;
}
Copy the code