인터넷정보

반 투명 테이블(은은한 분위기)

알 수 없는 사용자 2007. 10. 16. 17:29


http://oxtag.com/html/ex/clarity_table.html


 

배경이 비치는
반투명 테이블

 

 

뒷 부분의      
배경 이미지가
 연하게 비치죠?


배경그림이 테이블위로 비치는 반투명 테이블입니다.
은은한 분위기를 내고자 할 때 사용하면 좋겠죠.
일단 배경그림이 있는 전체문서에서 문서의 알맞은 곳에 위의 소스를 적용
시켜서 만들어도 이쁘구요. 혹은 위에서 보는 것처럼 일단 나모에서 표만들기
로 표를 한 개나 두 개정도 만든다음 각 '셀속성'으로 들어가서 배경삽입하는
곳에 바탕으로 깔고 싶은 배경이나 또는 이쁜 이미지를 삽입한 후 다시 그
테이블 안에 마우스 커서를 두고 위치를 표시해둔뒤,나모의 html 상태로 들어
가서 표시된 그 부분에 위의 테이블소스를 삽입해주시면 됩니다.

위의 소스도 각자 나름대로 변화시켜 적용해보세요.

색상도 바꾸고 테이블사이즈(
width="150" height="120")와 글씨모양(size="2"
face="돋움")
도 바꾸어보세요.
'
Opacity=60'  라고 되어있는부분에서는 수치를 늘일수록 더 연해집니다.
또, border:1 solid 라고 되어있는 부분에서 'solid' 대신에 'dotted'를 넣으면
점선테두리가 생깁니다.  

나름대로 더이쁘게 변화시켜보세요.
   

아래 소스를 보시고 수정해 보세요.

<table border="0">
    <tr>
        <td width="187" height="132" background="../img/rose.gif">
            <p align="center">&nbsp;<table  width="120" height="70" style='background-color:#FFFFFF; filter: Alpha(Opacity=60);'>
  <tr>
                    <td><p align="center"><font color="red" size="2" face="돋움">배경이 비치는<br>반투명 테이블</font>
  </td></tr>
</table>        </td>
        <td width="26" height="132">
            <p>&nbsp;</p>
        </td>
        <td width="187" height="132" background="../img/train.gif">
            <p align="center">&nbsp;<table  width="120" height="70" style='background-color:#FFFFFF; border:1 dotted #63BEFC; filter: Alpha(Opacity=50);'>
  <tr><td width="206"><p align="center"><font color="#572EFD" size="2" face="돋움">뒷
                                    부분의 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>배경
                                    이미지가<br>&nbsp;연하게 비치죠?</font>
  </td></tr>
</table>        </td>
    </tr>
</table>


 
반응형