| <img src=”klematis.jpg” width=”150″ height=”113″ alt=”klematis”style=”opacity:0.4;filter:alpha(opacity=40)” />
IE가?filter:alpha(opacity=x)를 사용하는 반면, Firefox는 투명도에 대해 property?opacity:x를 사용한다. |
Tip:?투명도에 대한 CSS3 syntax는?opacity:x이다.
Firefox (opacity:x)에서, x는 0.0 ~ 1.0 까지다. 낮은값은 element를 더욱 투명하게 만든다.
IE (filter:alpha(opacity=x))에서, x는 0 ~ 100 까지다. 낮은값은 element를 더욱 투명하게 만든다.
http://www.w3schools.com/css/css_image_transparency.asp
The CSS3 property for transparency is?opacity.
First we will show you how to create a transparent image with CSS.
Regular image:
The same image with transparency:
Look at the following CSS:
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
IE9, Firefox, Chrome, Opera, and Safari use the property?opacity?for transparency. The opacity property can take a value from 0.0 – 1.0. A lower value makes the element more transparent.
IE8 and earlier use?filter:alpha(opacity=x). The x can take a value from 0 – 100. A lower value makes the element more transparent.
Example 2 – Image Transparency – Hover Effect
Mouse over the images:
?
The CSS looks like this:
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
The first CSS block is similar to the code in Example 1. In addition, we have added what should happen when a user hover over one of the images. In this case we want the image to NOT be transparent when the user hover over it.
The CSS for this is:?opacity=1.
IE8 and earlier:?filter:alpha(opacity=100).
When the mouse pointer moves away from the image, the image will be transparent again.
Example 3 – Text in Transparent Box
This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box.
The source code looks like this:
<head>
<style type=”text/css”>
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);?/* For IE8 and earlier */
}
div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
}
</style>
</head><body>
<div>
<div>
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
</body>
</html>
First, we create a div element (class=”background”) with a fixed height and width, a background image, and a border. Then we create a smaller div (class=”transbox”) inside the first div element. The “transbox” div have a fixed width, a background color, and a border – and it is transparent. Inside the transparent div, we add some text inside a p element.