Set background gradients of different colors using the transparency of the background gradient_html/css_WEB-ITnose

The project has been working on color configuration schemes for different themes in the past few days. The color of the entire theme must be configured according to the color input by the user. What is troublesome is that in one of the themes, all the list header background colors are different. It is a linear gradient of 2 to 3 sets of gradient values, that is, different but very similar gradient colors are generated based on the color values ​​input by the user. I checked some information on the Internet, and now there is js that supports automatic filling of gradient colors based on the web page content you input. But for people like me who are not very good at js, I still want to find some method from css3.

I found that the transparency in the background gradient of css3 can solve this problem (provided that the colors of the background gradient are similar).

I will briefly talk about the linear gradient in css3 background gradient here. The general structure of a linear gradient is:

background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);

Each browser renders it differently and is divided into:

Webkit:

background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);

Gradient type - in the attribute-webkit-linear-gradient

Where does the gradient start (top)

The color value and in the gradient The position of (rgba(0,0,0,0.1) 40%)

The following writing method is for the old version of safari

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.1)), color-stop(40%, rgba(0, 0, 0, 0.1)), color-stop(98%, rgba(0, 0, 0, 0.2)),color-stop(100%, #FFFFFF));

gradient type ( linear)

X and Y coordinates of the start of the gradient (0 0 or left-top)

X and Y coordinates of the end of the gradient (0 100% or left-bottom)

Color Value(color-stop(40%, rgba(0,0,0,0.1)))

Mozilla:

background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);

The writing method of Firefox rendering gradient is roughly the same as Safari. The difference is that the gradient attribute needs to be changed to -moz-linear-gradient

Opera:

background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);

According to the above writing method, let Opera browser render and directly change the attribute to -o-linear-gradient. Isn’t it very simple?

IE:

IE is stubborn and does not support gradients, but provides gradient filters

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#22FFFFFF', EndColorStr='#33000000');

Having said so much, are you curious about the 0.1 in rgba(0, 0, 0, 0.1) in the example? Yes, the key to solving this headache is just that - gradient transparency. Setting the gradient transparency (value from 0.1-0.9) can make the gradient color under different values ​​of transparency. That is to say, through transparency, the background can show the background color under different transparency.

The picture below is the background gradient generated by the above code:

Can’t you see that the gradient is transparent (it feels gray)? That's right, because the color value is from white to black, the transition color in the middle is naturally gray. But if you add a background color, the effect will come out.

For example, let’s add a background-color: #92D050:

You only need to configure the background-color to make the background appear different Gradient color.

Complete code:

1 background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);2 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.1)), color-stop(40%, rgba(0, 0, 0, 0.1)), color-stop(98%, rgba(0, 0, 0, 0.2)),color-stop(100%, #FFFFFF));3 background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);4 background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);5 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#22FFFFFF', EndColorStr='#33000000');6 background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);7     background-color: #669900;

The color (rgb) in rgba() is generally white (255, 255, 255) or black (0, 0,0), and the transparency setting depends on what kind of gradient effect you want.

Here are a few examples of different gradient colors:

background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);

background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 2%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);

background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 2%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.2) 98%, rgba(255, 255, 255, 0.9) 99%);

So if you can use the background gradient well The transparency can define a unified background gradient color to a large extent, and the user only needs to enter a color field to configure the theme to the desired gradient effect. Unfortunately, for now, this method can only be applied to themes with similar background gradient colors. Background gradients of more than one color still have to be written this way

background: linear-gradient(to bottom, #396E8E 0%, #336888 29%, #225777 67%, #194E6E 100%);