May 03, 2021 CSS
1. CSS image Transparent/Opaque
2. Instance 1 - Create a transparent image
Using CSS makes it easy to create transparent images.
Note: The CSS Opacity property is part of W3C's CSS3 recommendations.
The transparency of the properties in CSS3 is opacity .
First, we'll show you how to create a transparent image with CSS.
Normal image
The same image has transparency:
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.
Move the mouse over the image:
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.
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;
}