Tutorial on how to set color values and transparency values of elements by opacity or RGBA
This article mainly explains the "opacity or RGBA set color values and elements of the transparency of the method tutorial", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "about opacity or RGBA set color values and elements of the transparency value of the method tutorial" it!
Opacity declaration to set the transparency value of the element (change the value of transparency to a decimal value between 0 and 1, and 0.5 means 50% transparency).
The characteristic of opacity is that when opacity sets the transparency value of an element, the internal text and elements will also be transparent.
The code is as follows:
.demo {
Background-color:red
Filter:alpha (opacity=30)
Opacity:0.3
}
Note: the transparency value of the tag element whose class is demo is 30%, and the transparency value of the text and elements in it will also become 30%.
RGBA is also used to set colors.
R: positive integer for red value | percentage
G: positive integer for green value | percentage
B: blue value is a positive integer | percentage
A: transparency (value between 0-1)
The color value set through RGBA is only for the current element, and the internal text and the transparency value of the element have not changed.
The code is as follows:
.demo {
Background-color:rgba (255, 010, 0, 0. 3)
}
Note: the transparency value of the tag element whose class is demo is 30%, and there is no change in the text and the transparency value of the element.
RGBA sets color values for browser support:
Thank you for your reading, these are the contents of the tutorial on the method of setting color values and element transparency values of opacity or RGBA. After the study of this article, I believe you have a deeper understanding of the tutorial on the method of setting color values and element transparency values of opacity or RGBA. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
