Posts in current category

CSS images are transparent/opaque


May 03, 2021 23:00 CSS


Table of contents


CSS image Transparent/Opaque


Using CSS makes it easy to create transparent images.

Note: The CSS Opacity property is part of W3C's CSS3 recommendations.


Instance 1 - Create a transparent image

The transparency of the properties in CSS3 is opacity .

First, we'll show you how to create a transparent image with CSS.

Normal image

CSS images are transparent/opaque

The same image has transparency:

CSS images are transparent/opaque

Take a look at CSS below:

Img
{ opacity:0.4; f ilter:alpha(opacity=40); / /IE8 and earlier versions of the

IE9, Firefox, Chrome, Opera, and Safari use transparency properties to make images opaque. T he Opacity property values range from 0.0 to 1.0. The smaller the value, the more transparent the element.

IE8 and earlier versions used filters: alpha (opacity s x). T he value that x can take is from 0 to 100. Lower values make elements more transparent.

Tip: The CSS opacity properties are described in more detail in the CSS reference manual on this site.

img

{  opacity:0.4;  filter:alpha(opacity=40);  /*IE8 及更早版本 */  }


Try it out . . .

Instance 2 - Transparency of the image - Hover effect

Move the mouse over the image:

CSS images are transparent/opaque

CSS images are transparent/opaque

CSS style:

img:hover { opacity:1.0; f ilter:alpha(opacity=100); / ?IE8 and earlier versions

The first CSS block is similar to the code in Example 1. I n addition, we've added what happens when a user hovers over one of the images. In this case, when the user hovers over the image, we want the picture to be clear.

This CSS is: opacity s1 .

IE8 and earlier use: filter:alpha (opacity-100). .

When the mouse pointer is away from the image, the image regains transparency.

img:hover

{ opacity:1.0;

filter:alpha(opacity=100); /* For IE8 and earlier */}


Try it out . . .

Example 3 - Text in a transparent box

The text is in a transparent box. T he text is in a transparent box. T he text is in a transparent box. T he text is in a transparent box. T he text is in a transparent box. T he text is in a transparent box. T he text is in a transparent box. T he text is in a transparent box. T he text is in a transparent box. T he text is in a transparent box. T he text is in a transparent box. T he text is in a transparent box. The text is in a transparent box.

First, we create a fixed height and width div element with a background picture and border. T hen we create a smaller div element inside the first div. T his div also has a fixed width, background color, border - and it is transparent. Inside the transparent div, we add some text inside the P element.

div .background

{ width:500px;height:250px;border:2px solid black;

background:url(https://atts.w3cschool.cn/attachments/image/20200818/1597713899949694.jpg) repeat;

}


Try it out . . .