Mini program processing of color value transparency

In the WeChat applet, you can use CSS styles to display the transparency of color values. The following are two commonly used implementation methods:

1. Use rgba() function:

.element {
  background-color: rgba(255, 0, 0, 0.5); /* 使用rgba()函数设置背景颜色,最后一个参数为透明度,取值范围为0~1,数值越小越透明 */
}

2. Use hexadecimal color values:

.element {
  background-color: #FF000080; /* 使用八位十六进制颜色值,后两位表示透明度,取值范围为00~FF,数值越小越透明,00为完全透明,FF为不透明 */
}

In the above code, .elementit is the selector of the element you want to set transparency, which can be modified according to the actual situation. By setting transparency, the background color of an element can show through the underlying element or background, achieving a transparent effect.

It should be noted that the effect of transparency may be affected by the context in which the element is located. If the overlying element or background is opaque, transparency settings may be limited or disabled. Therefore, when using transparency, make sure that the element's context supports transparency.

Guess you like

Origin blog.csdn.net/u010231454/article/details/131560829