How to set css opacity-Front-end Q&A-php.cn

How to set css opacity

藏色散人

Release： 2023-01-04 09:34:09

Original

4487 people have browsed it

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.

How to set css opacity

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);}

Copy after login

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）.

Copy after login

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;

Copy after login

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>

Copy after login

Effect:

How to set css opacity