Home >Web Front-end >Front-end Q&A >How to set transparency of html img image
How to set transparency of html img image
- 青灯夜游Original
- 2021-02-22 12:04:589805browse
html How to set the transparency of img pictures: 1. Set the "opacity:value;" style to the img picture, and the value is between 0.0 (completely transparent) and 1.0 (completely opaque); 2. Give the img picture Set the "filter:opacity(%);" style.
The operating environment of this tutorial: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.
html img image setting transparency
Method 1: Use opacity to set image transparency
Opacity Property sets the transparency level of an element.
Syntax:
opacity: value;
Attribute value:
value: Specifies opacity. From 0.0 (fully transparent) to 1.0 (fully opaque)
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.img2{
opacity: 0.5;
}
</style>
</head>
<body>
<div>
<p>原图：</p>
<img src="demo/img/5.jpg" style="max-width:90%"/ alt="How to set transparency of html img image" >
</div>
<div>
<p>设置透明度的图：</p>
<img class="img2" src="demo/img/5.jpg" style="max-width:90%"/ alt="How to set transparency of html img image" >
</div>
</body>
</html>Rendering:
[Recommended tutorials: CSS video tutorial, "html video tutorial"]
Method 2: Use filter:opacity( %)
The filter attribute defines the visual effect (for example: blur and saturation) of the element (usually ).
opacity(%): Convert the transparency of the image. The value defines the scale of the conversion. A value of 0% means complete transparency, a value of 100% means no change to the image. Values between 0% and 100% are linear multipliers of the effect, equivalent to multiplying the number of image samples. If the value is not set, the value defaults to 1. This function is very similar to the existing opacity attribute, except that through filter, some browsers provide hardware acceleration to improve performance.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.img2{
-webkit-filter: opacity(100%); /* Chrome, Safari, Opera */
filter: opacity(20%);
}
</style>
</head>
<body>
<div>
<p>原图：</p>
<img src="demo/img/5.jpg" style="max-width:90%"/ alt="How to set transparency of html img image" >
</div>
<div>
<p>设置透明度的图：</p>
<img class="img2" src="demo/img/5.jpg" style="max-width:90%"/ alt="How to set transparency of html img image" >
</div>
</body>
</html>Rendering:
Introduction to Programming ! !
The above is the detailed content of How to set transparency of html img image. For more information, please follow other related articles on the PHP Chinese website!