【CSS3】-Color RGBA and gradient color_html/css

【CSS3】-Color RGBA and gradient color_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:45:53

Original

1737 people have browsed it

RGBA of color

RGB is a color standard, which is composed of changes in red (R), green (G), blue (B) and Add to each other to get a variety of colors. RGBA is based on RGB and adds parameters to control alpha transparency.

Syntax:

color：rgba(R,G,B,A)

Copy after login

Three color parameters of R, G, and B. The value range of positive integer values is: 0 - 255.

The value range of the percentage value is: 0.0% - 100.0%. Values outside the range are rounded to the nearest value limit. Not all browsers support using percentage values.

A is the transparency parameter, the value is between 0 and 1, and cannot be negative.

Code example:

background-color:rgba(100,120,60,0.5);

Copy after login

Gradient color

CSS3 Gradient is divided into linear gradient (linear) and radial gradient . Since different rendering engines have different syntax for implementing gradients, here we only analyze its usage based on the W3C standard syntax of linear gradients. You can refer to relevant information for the rest. W3C syntax has been supported by browsers such as IE10, Firefox19.0, Chrome26.0 and Opera12.1.

In this section let’s talk about linear gradient:

Parameters:

The first parameter: Specify the gradient direction, which can be expressed by the keyword "angle" or "English":

(Click the image to enlarge)

When the first parameter is omitted, the default is "180deg", which is equivalent to "to bottom".

The second and third parameters, represent the starting point and end point of the color , which can have multiple color values.

background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

Copy after login

Rendering:

 例子

Copy after login

<!DOCTYPE html><html><head> <meta charset="utf-8"><title>Gradient</title><style type="text/css">p {  width: 400px;  height: 150px;  line-height: 150px;  text-align:center;  color: #000;  font-size:24px;  background-image:linear-gradient(to top left,red,green,blue,yellow,black,white);} </style></head> <body>　　<p>右下角向左上角的线性渐变背景</p></body></html>

Copy after login

Rendering:

Copy after login