css에서 알값으로 투명도를 조절할수 있습니다.
저같은 경우는 보통 슬라이딩 배너나 이미지위에 텍스트를 올릴때 투명도를 조절해서 사용합니다.
이미지 위에 레이어를 올리고 레이어의 배경색을 지정해서 그냥 사용할 경우
이미지를 가려지게 되서 이미지의 가독성이 떨어지게 됩니다.
이럴경우 레이어의 투명도를 조절해서 이미지의 가독성을 높이는 효과를 줄 수 있습니다.
간단한 html과 css 예제를 보여드리겠습니다.
<html>
<head>
<title>css를 통한 투명도 조절</title>
<style>
.alpha{
filter: alpha(opacity=70);
opacity: 0.7;
}
</style>
</head>
<body>
<div style="position:relative">
<div style="position:relative"><img src="heart-1776746_1920____.jpg" style="width:600px" border="0" alt="">
</div>
<div style="position:absolute;width:600px;height:100px;top:318px;background:#000;z-index:1" class="alpha"></div>
<div style="position:absolute;width:600px;height:100px;top:318px;font-size:30px;font-weight:bold;line-height:100px;text-align:center;color:#fff;z-index:2">
CSS를 이용환 투명도 조절
</div>
</div>
</body>
</html>
결과물은 각자 테스트 해보시는게 좋을것 같습니다.