CSS image transparent/opaque

Transparent images are easy to create using CSS .

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

more examples

Create transparent image - hover effect

Create a transparent box with a background image with text

Example 1 - Create a transparent image

The transparency of properties in CSS3 is opacity .

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

normal image

The same image with transparency:

Take a look at the CSS below:

img
 { 
  opacity : 0.4 ; 
  filter : alpha(opacity=40) ; /* IE8 and earlier */ 
}

IE9, Firefox, Chrome, Opera, and Safari browsers use the transparency property to make images opaque. Opacity property value from 0.0 - 1.0. Smaller values make the element more transparent.

IE8 and earlier use filter: alpha (opacity=x). The values x can take are from 0 - 100. Lower values make the element more transparent.

Example 2 - Transparency of Image - Hover Effect

Move the mouse over the image:

CSS style:

img
 { 
  opacity : 0.4 ; 
  filter : alpha(opacity=40) ; /*   IE8 and earlier */ 
}
img:hover
{ 
  opacity : 1.0 ; 
  filter : alpha(opacity=100) ; /* IE8 and earlier */ 
}

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

This CSS is: opacity=1 .

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

When the mouse pointer moves away from the image, the image will regain transparency.

Example 3 - Text in a Transparent Box

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

The source code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div.background
{
  width:500px;
  height:250px;
  background:url(klematis.jpg) repeat;
  border:2px solid black;
}
div.transbox
{ 
  width : 400px ; 
  height : 180px ; 
  margin : 30px 50px ; 
  background-color : #ffffff ; 
  border : 1px solid black ; 
  opacity : 0.6 ; 
  filter : alpha(opacity=60) ;  /* IE8 and earlier */ 
}
div.transbox p
{
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
}
</style>
</head>
 
<body>
 
< div class ="background" > 
< div class ="transbox" > 
< p > These texts are in transparent boxes. The text is in a transparent box. The text is in a transparent box. The text is in a transparent box. The text is in a transparent box. The text is in a transparent box. The text is in a transparent box. The text is in a transparent box. The text is in a transparent box. The text is in a transparent box. The text is in a transparent box. The text is in a transparent box. The text is in a transparent box.
</ p > 
</ div > 
</ div >
 
</body>
</html>

First, we create a fixed height and width div element with a background image and border. Then we create a smaller div element inside the first div. This div also has a fixed width, background color, border - and it's transparent. Inside the transparent div, we add some text inside the P element.

2、

2.Back to top

3.Back to top

4.Back to top

5.Back to top

1、

http://www.runoob.com/css/css-image-transparency.html

2、

6.Back to top

Author: ylbtech
Source: http://ylbtech.cnblogs.com/
The copyright of this article belongs to the author and the blog garden. Reprints are welcome, but this statement must be retained without the author's consent, and a link to the original text should be given in an obvious position on the article page, otherwise Reserve the right to pursue legal responsibility.

CSS: CSS image transparent/opaque

CSS image transparent/opaque

more examples

Example 1 - Create a transparent image

Example 2 - Transparency of Image - Hover Effect

Example 3 - Text in a Transparent Box

Guess you like