<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS Tips</title>
    <style>
      div {
        padding: 30px;
        background-image: url( )undefinedundefinedlego-300x200.png" );
      }
      p {
        padding: 30px;
        font-size: 50px;
        font-weight: bold;
        text-align: center;
        background-color: rgba( 255, 255, 255, 0.5 );
      }
    </style>
  </head>
  <body>
    <div>
      <p>Lorem</p>
    </div>
  </body>
</html>

620x356xcss-tip-background-opacity-02.png.pagespeed.ic.mYXB_nyFRY.webp

참고로 RGBA 색상은 IE8 이하에서는 적용되지 않습니다.



 <!DOCTYPE html>

<html>

<head>

<meta charset=utf-8 />

<title>IE8 이하 rgba 대체 기법.</title>

  <style>

    body { background: #000 url(http://cfile8.uf.tistory.com/image/180FF2044C90E1CC7DA598) no-repeat; font-size: 12px; }

    p { padding: 10px;background: #000; color: #fff; }

    div { margin: 5px 0; padding: 10px; height: 100px; color: #fff; }

    #rgba { 

      background: rgba(0, 0, 0, 0.6); 

      /* 

        IE8이하는 rgba가 동작하지 않기 때문에 배경 투명도 적용을 위해 filter의 gradient을 대체 이용한다. 

        컬러값 60000000의 8자리 숫자의 의미: 앞 60 불투명도, 나머지 6자리 컬러값.

        startColorstr와 endColorstr의 색을 같게 하여 배경 투명도 처리를 하는것.

        하지만 원래는 그라데이션 처리하는 기법이기 때문에 같은 60% 투명도라고 해도 약간의 차이는 있다.

      */

      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#60000000,endColorstr=#60000000);

      zoom: 1; /* 일반적이진 않지만 ie6, 7 에서 적용 안되는경우 선언. */

    }

    #opacity { background: #000; opacity: 0.6; filter: alpha(opacity=60); }

  </style>

</head>

<body>

  <p>DOM element의 투명도를 결정하는 opacity, 배경의 투명도를 결정하는 background rgba.</p>

 

  <div id="rgba">

    [background 투명 처리]<br>

    background: rgba(0, 0, 0, 0.5);<br><br>

    [IE8 이하 배경만 투명도 처리]<br>

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#60000000,endColorstr=#60000000);

  </div>

  <div id="opacity">

    [DOM element 투명 처리]<br>

    opacity: 50%<br><br>

    [IE8 이하 opacity 처리]<br>

    filter: alpha(opacity=50);

  </div>

</body>

</html>


<!-- 

[참고] 

 - http://css-tricks.com/rgba-browser-support/


[Generate 제공]

 - http://hammerspace.co.uk/2011/10/cross-browser-alpha-transparent-background-css 


[별참 - GradientType은 그라데이션 방향] 

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff');

-->