How to set the transparency of html images

How to set the transparency of html images: 1. Use the style attribute in the img element to set the "opacity: transparency value;" style; 2. Use the style attribute in the img element to set "filter:opacity (transparency value) ;"style.

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

htmlimage

In HTML, you can use the img element to embed an image into a web page.

Please note that technically the tag does not insert an image into the web page, but rather links the image from the web page. The tag creates a placeholder for the referenced image.

<img  src="/static/imghw/default1.png"  data-src="img/1.jpg"  class="lazy"      style="max-width:90%" / alt="How to set the transparency of html images" >

html Image setting transparency

Method 1: Use the style attribute in the img element to set "opacity: transparency Value;" style

<img  src="/static/imghw/default1.png"  data-src="img/1.jpg"  class="lazy"      style="max-width:90%" style="opacity: 0.5;"/ alt="How to set the transparency of html images" >

Method 2: Use the style attribute in the img element to set the "filter:opacity (transparency value);" style

<img  src="/static/imghw/default1.png"  data-src="img/1.jpg"  class="lazy"      style="max-width:90%" style="filter:opacity(0.3);"/ alt="How to set the transparency of html images" >

Recommended tutorial: "html video tutorial"

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