안녕하세요 모빌리티입니다.
투명도를 조절하여 이미지나
글자에 효과를 주는 법에 대해서
알려드릴게요
오늘의 키워드
"Alpha"
Alpha는 투명도를 조절하는 필터 태그로
다음과 같은 속성으로 사용합니다.
불투명도를 조정하는
opacity
기본값을 100으로 하고
값이 낮을 수록 투명해집니다.
0~100 까지 값을 주게 됩니다.
<IMG src="img.jpg" style="filter:alpha(opacity=50)">
투명도의 모양의 속성값
style
단일형일때 0, 선형일때 1
타원형일때 2 직사각형일때 3
<IMG src="img.jpg" style="filter:alpha(opacity=50, style=0)">
투명도가 끝나는 지점의 투명도
finishOpacity
<IMG src="img.jpg" style="filter:alpha(opacity=50, style=0, finishOpacity=0)">
원본에 비해서 투명해진 부분이 보이는 지요?
<HTML>
<HEAD>
<TITLE>투명도 조절하기(alpha)</TITLE>
</HEAD>
<BODY bgcolor="black">
<P align="center">
<IMG src="img.jpg">
<FONT color="white">원본이미지</FONT><BR><BR>
<IMG src="img.jpg" style="filter:alpha(opacity=30,style=0,finishOpacity=0)">
<FONT color="white">투명이미지1</FONT>
<IMG src="img.jpg" style="filter:alpha(opacity=30,style=1,finishOpacity=0)">
<FONT color="white">투명이미지2</FONT><BR><BR>
<IMG src="img.jpg" style="filter:alpha(opacity=30,style=2,finishOpacity=0)">
<FONT color="white">투명이미지3</FONT>
<IMG src="img.jpg" style="filter:alpha(opacity=30,style=3,finishOpacity=0)">
<FONT color="white">투명이미지4</FONT><BR><BR>
</P>
</BODY>
</HTML>
위 사진에 적용된 HTML입니다.
예제
투명도.html2017/06/26 - [컴퓨터＄/HTML] - [HTML #21] CSS란
2017/06/27 - [컴퓨터＄/HTML] - [HTML #22] CSS 인라인 방식
2017/06/28 - [컴퓨터＄/HTML] - [HTML #23] 외부 스타일 시트로 여러문서에 적용하기
나눔은 
최고의 기쁨입니다.
이글이 도움이 되셨다면 아래
♡ 빈 하트를 채워주세요.
'IT' 카테고리의 다른 글
| [HTML #25] 자바 스크립트 (0) | 2017.06.30 |
|---|---|
| [추천앱] 슬로우 뉴스 (0) | 2017.06.29 |
| [추천앱] 매일상식 - 하루 3개씩 (0) | 2017.06.28 |
| [HTML #23] 외부 스타일 시트로 여러문서에 적용하기 (0) | 2017.06.28 |
| [HTML #22] CSS 인라인 방식 (0) | 2017.06.27 |
