Shulou(Shulou.com)06/03 Report--

In this issue, the editor will bring you about how to set the opacity of html. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

How does html set opacity?

Method one

Rgba () sets color transparency

Syntax:

Rgba (RMagna Gregory BMaga)

RGBA is an acronym for Red (red) Green (green) Blue (blue) and Alpha (opacity). The RGBA color value is an extension of the RGB color value with an alpha channel that specifies the opacity of the object.

Introduction to the values in rgba ():

R: red value. Positive integer (0,255)

G: green value. Positive integer (0,255)

B: blue value. Positive integer (0,255)

A: transparency. Value between 0 and 1

Rgba () can simply set color transparency, which has many applications in the layout of the page. For example: make the background transparent, but the text above is opaque.

Code example:

Rgba () .demo {width: 350px; height: 300px; margin: 50px auto;} .demo * {width: 120px; height: 120px; margin: 10px; float: left } .demo1 {background:rgba;} .demo2 {background:rgba;} background color is opaque, text is opaque! The background color is translucent and the text is opaque!

Effect picture:

、

Method two

The opacity property sets the background transparency

Syntax:

Opacity: value

Value: specifies the opacity from 0. 0 (fully transparent) to 1. 0 (completely opaque).

The opacity attribute is inherited, which makes all elements in the container transparent

Code example:

Opacity attribute .demo {width: 280px; height: 140px; margin: 50px auto;} .demo1, .demo2 {width: 120px; height: 120px; margin: 10px; float: left Background:#2DC4CB;} .demo1 {opacity:1;} .demo2 {opacity:0.5;}

The background color is opaque and the text is opaque!

The background color is transparent and the text is also transparent!

Effect picture:

Opacity:0.5; makes all the elements of the demo2 container semitransparent.

Summary: although both the rgba () method and the opacity method can achieve transparency, rgba () only acts on the color of the element or its background color (child elements of the rgb () transparency element will not inherit its transparency effect); while opacity has inheritance, it not only acts on the element itself, but also makes all child elements within the element transparent.

This is how to set the opacity of html shared by the editor. If you happen to have similar doubts, please refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.