새소식
반응형
WEB/CSS
[CSS] CSS opacity 를 이용한 background 의 투명도 조절
- -
반응형
2021-03-15
opacity 구글 번역상에서 불투명이라는 단어로 해석된다. 말 그대로 색에 투명도를 부여할 수 있는 css 속성이다. 오늘은 이를 통해 배경색의 변화를 주는 방법을 알아보자.
- opacity
opacity의 기본(default) 값은 1이다. 1이 원색 그 자체로써 투명도를 부여하지 않은 것을 뜻한다. 해당 속성은 0부터 1까지의 범위를 가지며, 자유롭게 값을 부여할 수 있다.
- 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
margin: 10px;
width: 300px;
height: 25px;
background : blue;
/* 문자 색 지정 */
color: silver;
}
#one{
opacity: 0.1
}
#three{
opacity: 0.3
}
#five{
opacity: 0.5
}
#seven{
opacity: 0.7
}
#nine{
opacity: 0.9
}
</style>
</head>
<div id="one"> opacity 0.1 </div>
<div id="three"> opacity 0.3 </div>
<div id="five"> opacity 0.5 </div>
<div id="seven"> opacity 0.7 </div>
<div id="nine"> opacity 0.9 </div>
<div id="df"> opacity 1 </div>
<body>
</body>
</html>
div 태그에 배경색을 각각 부여해주고 이후 opacity통해 각각 다른 투명도를 부여해 주었다. 결과는 아래와 같으며, 부여된 opacity의 숫자가 작을수록 점점 투명도가 높아지는 것을 확인할 수 있다.
반응형
'WEB > CSS' 카테고리의 다른 글
| [CSS] CSS bottom 속성을 이용한 수직 위치 변경 방법 알아보기. (0) | 2021.03.17 |
|---|---|
| [CSS] CSS Top 속성을 이용한 수직 위치 변경 방법 알아보기. (0) | 2021.03.16 |
| [CSS] CSS background 와 background-color의 차이 알아보기. (0) | 2021.03.13 |
| [CSS] CSS text-align 을 통한 데이터(텍스트)정렬 방법 알아보기 (0) | 2021.03.11 |
| [CSS] CSS white-space 개행문자를 처리하는 방법 알아보기. (0) | 2021.03.10 |
Contents
소중한 공감 감사합니다