티스토리 뷰

프로그래밍/CSS 3.0

CSS3 투명도 조절 opacity

쇠주는참이슬 2012. 3. 20. 13:42

전체가 투명해지는게 아니라.
이미지만. 혹은 텍스트값만. rgb로 표현되는 값들을 rgba로 마지막에 알파값. (투명도: 0.0 ~ 1.0) 로 조절이 가능하다.






<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8">
<title>Opacity</title>
<style>
.mybox {
position:relative;
width:300px;
height:150px;
background-image:url("bg1.jpg");
background-repeat:no-repeat;
background-position:left top;
}
.noopa {
position:relative;
top:20px;
background-color:#fff;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:60px;
font-weight:800;
color:#000;
text-align:center;
vertical-align:middle;
}

.opa1 {
position:relative;
top:20px;
background-color:rgba(255,255,255,0.5);
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:60px;
font-weight:800;
color:#000;
text-align:center;
vertical-align:middle;
}

.opa2 {
position:relative;
top:20px;
background-color:#fff;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:60px;
font-weight:800;
color:rgba(0,0,0,0.5);
text-align:center;
vertical-align:middle;
}

</style>
</head>

<body>
<div class="mybox">
<h1 class="noopa">CSS3</h1>
</div>
<div class="mybox">
<h1 class="opa1">CSS3</h1>
</div>
<div class="mybox">
<h1 class="opa2">CSS3</h1>
</div>
</body>
</html>

'프로그래밍 > CSS 3.0' 카테고리의 다른 글

트랜지션 (Transition)  (0) 2012.03.20
HTML5 + CSS3 만으로 아쿠아 버튼 만들기  (0) 2012.03.20
그림자 효과 추가하기 -box-shadow  (0) 2012.03.20
모퉁이 잡아당겨서 크기 조절하기. resize 속성  (0) 2012.03.20
first-child, last-child  (0) 2012.03.20
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함