How to set transparency of html img image-Front-end Q&A-php.cn

How to set transparency of html img image

青灯夜游

Release： 2023-01-03 09:24:19

Original

9777 people have browsed it

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.

How to set transparency of html img image

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;

Copy after login

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>

Copy after login

Rendering:

How to set transparency of html img image

[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 How to set transparency of html img image ).

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>

Copy after login

Rendering:

How to set transparency of html img image

##For more programming-related knowledge, please visit:

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!