Set the background gradient and gradient transparency of different colors with the transparency of the background gradient.

Source: Internet
Author: User

Set the background gradient and gradient transparency of different colors with the transparency of the background gradient.

In the past few days, the project is working on different theme color configuration schemes. You need to configure the color of the entire theme based on the user's input, the background color of all the headers of a topic is a linear gradient of two to three sets of gradient values. That is to say, different gradient colors with close similarity should be generated based on the color values entered by the user. I checked some information online, and now js supports auto-filled Gradient based on the content of the webpage you entered. But for people like me who are not very good at js, I still want to find a method from css3.

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

Here I will briefly describe the linear gradient in the css3 background gradient. The general structure of 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%);

Different browsers have different rendering methods, which are divided:

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 attributes-webkit-linear-gradient
  • Where does the gradient start (top)
  • Color value and position in the gradient (rgba (0.1, 0, 40%)

The following code is used 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 y axis coordinates starting from gradient (0 0 or left-top)
  • X y axis coordinates after gradient (0 100% or left-bottom)
  • Color value (color-stop (40%, rgba (0.1, 0, 0 )))

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 method for writing the Firefox rendering gradient is roughly the same as that for Safari. The difference is that you need to change the gradient attribute 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 Code, it is very easy to change the attribute to-o-linear-gradient for operabrowser rendering?

IE:

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

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

 

After talking about this, are you curious about 0.1 of rgba (0, 0, 0, 0.1) in this example? That's right. The key to solving this headache is its gradient transparency. You can set the gradient transparency (the value ranges from 0.1 to 0.9) so that the gradient color is in the transparency of different values. That is to say, the background color can be displayed under different transparency through transparency.

The following figure shows the background gradient generated using the above Code:

Isn't the gradient transparent )? Yes, because the color value ranges from white to black, the transitional color in the middle is naturally gray. However, if you are adding a background color, the effect will come out.

For example, we add

You only need to configure background-color to make the background fade differently.

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     

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

 

The following is an example 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%);

 

Therefore, if the transparency of the background gradient can be well applied, a unified background gradient can be defined to a large extent, and you only need to enter a color field, you can configure the theme as the desired gradient effect. Unfortunately, this method can only be applied to themes with similar background gradient colors. This method is used to add a color gradient.

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.