Home > Article > Web Front-end > How to set css opacity

How to set css opacity

藏色散人Original: 2021-04-02 10:59:474469browse

How to set css opacity: first create an HTML sample file; then use the img tag to introduce the image; finally add the css style to the style tag as "opacity: 0.5;" to set the transparency of the image.

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, DELL G3 computer

css can use two methods: filter:alpha() and opacity Set the opacity. When you directly use opacity to set the opacity, the size range is 0-1. When you use filter:alpha(), the size range is between 1-100.

How to set css opacity

filter:alpha() and opacity both set transparency, but opacity is incompatible in IE8 and below; so the filter attribute must be set

a:hover {  opacity: 1;  filter: alpha(opacity=100);}

When opacity is used to set transparency directly, the size range is between 0-1, and when it is 1, it is opaque. When filter:alpha() is used to set opacity, the size range is between 0-100, which is 100. It is opaque when

Basic attributes of filter:alpha()

filter：alpha（opacity，finishopacity，style，startX，startY，finishX，finishY）.

opacity: Transparency level, the range is 0-100, 0 represents completely transparent, 100 represents completely opaque.

finishopacity: When setting the transparency effect of the gradient, it is used to specify the transparency at the end, and the range is also 0 to 100.

style: Set the gradient transparent style. A value of 0 represents a uniform shape, 1 represents a linear shape, 2 represents a radial shape, and 3 represents a rectangle.

startX and startY: represent the starting X and Y coordinates of the gradient transparency effect.

finishX and finishY: represent the X and Y coordinates of the end of the gradient transparency effect.

opacity attribute:

opacity: value|inherit;

value specifies opacity. From 0.0 (fully transparent) to 1.0 (fully opaque).

inherit The value of the opacity attribute should be inherited from the parent element.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  opacity: 0.5;
}
</style>
</head>
<body>

<h1>图像透明度</h1>

<p>opacity 属性规定元素的透明度。值越低，越透明：</p>

<p>50% 不透明度的图像：</p>

<img src="/i/photo/tulip-red.jpg" alt="Tulip" width="600"    style="max-width:90%">

</body>
</html>

Effect:

How to set css opacity

Recommended study: "css video tutorial"

The above is the detailed content of How to set css opacity. For more information, please follow other related articles on the PHP Chinese website!

html5 css css3 html Filter 继承

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to set overflow hiding in cssNext article：How to set overflow hiding in css

See more

How to set css opacity

Related articles