[CSS]CSS Advanced - CSS Image Opacity/Transparency
개발관련/CSS/CSS3 2012. 10. 24. 02:13 |출처: http://www.w3schools.com/css/css_image_transparency.asp
Example 1 - Creating a Transparent Image
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:
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
{
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.
CSS Image Opacity
Creating transparent images - mouseover effect
Creating a transparent box with text on a background image
'개발관련 > CSS/CSS3' 카테고리의 다른 글
| [CSS]CSS Advanced - CSS Attribute Selectors (0) | 2012.10.24 |
|---|---|
| [CSS]CSS Advanced - CSS Image Sprites (0) | 2012.10.24 |
| [CSS]CSS Advanced - CSS Image Gallery (0) | 2012.10.24 |
| [CSS]CSS Advanced - CSS Navigation Bars (0) | 2012.10.24 |
| [CSS]CSS Advanced - CSS Pseudo-elements (0) | 2012.10.24 |