{"id":617,"date":"2012-02-15T02:33:06","date_gmt":"2012-02-15T02:33:06","guid":{"rendered":"http:\/\/brain.dailyon.net\/?p=617"},"modified":"2012-02-15T02:33:06","modified_gmt":"2012-02-15T02:33:06","slug":"css-%ed%88%ac%eb%aa%85%eb%8f%84-%ec%a0%81%ec%9a%a9-ie-filteralphaopacityx-ff-opacityx","status":"publish","type":"post","link":"https:\/\/blog.goorigo.com\/?p=617","title":{"rendered":"css : \ud22c\uba85\ub3c4 \uc801\uc6a9 (IE : filter:alpha(opacity=x), FF :opacity:x)"},"content":{"rendered":"\n\n\n
<img src=”klematis.jpg” width=”150″ height=”113″ alt=”klematis”style=”opacity:0.4;filter:alpha(opacity=40)” \/><\/p>\n

IE\uac00?filter:alpha(opacity=x)\ub97c \uc0ac\uc6a9\ud558\ub294 \ubc18\uba74, Firefox\ub294 \ud22c\uba85\ub3c4\uc5d0 \ub300\ud574 property?opacity:x\ub97c \uc0ac\uc6a9\ud55c\ub2e4.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Tip:?\ud22c\uba85\ub3c4\uc5d0 \ub300\ud55c CSS3 syntax\ub294?opacity:x\uc774\ub2e4.<\/p>\n

Firefox (opacity:x)\uc5d0\uc11c, x\ub294 0.0 ~ 1.0 \uae4c\uc9c0\ub2e4. \ub0ae\uc740\uac12\uc740 element\ub97c \ub354\uc6b1 \ud22c\uba85\ud558\uac8c \ub9cc\ub4e0\ub2e4.<\/p>\n

IE (filter:alpha(opacity=x))\uc5d0\uc11c, x\ub294 0 ~ 100 \uae4c\uc9c0\ub2e4. \ub0ae\uc740\uac12\uc740 element\ub97c \ub354\uc6b1 \ud22c\uba85\ud558\uac8c \ub9cc\ub4e0\ub2e4.<\/p>\n

http:\/\/www.w3schools.com\/css\/css_image_transparency.asp<\/a><\/p>\n

The CSS3 property for transparency is?opacity<\/strong>.<\/p>\n

First we will show you how to create a transparent image with CSS.<\/p>\n

Regular image:<\/p>\n

\"klematis\"<\/p>\n

The same image with transparency:<\/p>\n

\"klematis\"<\/p>\n

Look at the following CSS:<\/p>\n

\n
img
\n{
\nopacity:0.4;
\nfilter:alpha(opacity=40); \/* For IE8 and earlier *\/
\n}<\/div>\n<\/div>\n

IE9, Firefox, Chrome, Opera, and Safari use the property?opacity<\/strong>?for transparency. The opacity property can take a value from 0.0 – 1.0. A lower value makes the element more transparent.<\/p>\n

IE8 and earlier use?filter:alpha(opacity=x)<\/strong>. The x can take a value from 0 – 100. A lower value makes the element more transparent.<\/p>\n

\n

Example 2 – Image Transparency – Hover Effect<\/h2>\n

Mouse over the images:<\/p>\n

\"klematis\"?\"klematis\"<\/p>\n

The CSS looks like this:<\/p>\n

\n
img
\n{
\nopacity:0.4;
\nfilter:alpha(opacity=40); \/* For IE8 and earlier *\/
\n}
\nimg:hover
\n{
\nopacity:1.0;
\nfilter:alpha(opacity=100); \/* For IE8 and earlier *\/
\n}<\/div>\n<\/div>\n

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.<\/p>\n

The CSS for this is:?opacity=1<\/strong>.<\/p>\n

IE8 and earlier:?filter:alpha(opacity=100)<\/strong>.<\/p>\n

When the mouse pointer moves away from the image, the image will be transparent again.<\/p>\n

\n

Example 3 – Text in Transparent Box<\/h2>\n
\n
\n

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>\n<\/div>\n<\/div>\n

The source code looks like this:<\/p>\n

\n
<html>
\n<head>
\n<style type=”text\/css”>
\ndiv.background
\n{
\nwidth:500px;
\nheight:250px;
\nbackground:url(klematis.jpg) repeat;
\nborder:2px solid black;
\n}
\ndiv.transbox
\n{
\nwidth:400px;
\nheight:180px;
\nmargin:30px 50px;
\nbackground-color:#ffffff;
\nborder:1px solid black;
\nopacity:0.6;
\nfilter:alpha(opacity=60);?\/* For IE8 and earlier *\/
\n}
\ndiv.transbox p
\n{
\nmargin:30px 40px;
\nfont-weight:bold;
\ncolor:#000000;
\n}
\n<\/style>
\n<\/head><body><\/p>\n

<div>
\n<div>
\n<p>This is some text that is placed in the transparent box.
\nThis is some text that is placed in the transparent box.
\nThis is some text that is placed in the transparent box.
\nThis is some text that is placed in the transparent box.
\nThis is some text that is placed in the transparent box.
\n<\/p>
\n<\/div>
\n<\/div><\/p>\n

<\/body>
\n<\/html><\/p>\n<\/div>\n<\/div>\n

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.<\/p>\n","protected":false},"excerpt":{"rendered":"

<img src=”klematis.jpg” width=”150″ height=”113″ alt=”klematis”style=”opacity:0.4;filter:alpha(opacity=40)” \/> IE\uac00?filter:alpha(opacity=x)\ub97c \uc0ac\uc6a9\ud558\ub294 \ubc18\uba74, Firefox\ub294 \ud22c\uba85\ub3c4\uc5d0 \ub300\ud574 property?opacity:x\ub97c \uc0ac\uc6a9\ud55c\ub2e4. Tip:?\ud22c\uba85\ub3c4\uc5d0 \ub300\ud55c CSS3 syntax\ub294?opacity:x\uc774\ub2e4. Firefox (opacity:x)\uc5d0\uc11c, x\ub294 0.0 ~ 1.0 \uae4c\uc9c0\ub2e4. \ub0ae\uc740\uac12\uc740 element\ub97c \ub354\uc6b1 \ud22c\uba85\ud558\uac8c \ub9cc\ub4e0\ub2e4.… <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/posts\/617"}],"collection":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=617"}],"version-history":[{"count":0,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/posts\/617\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=617"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=617"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=617"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}