728x90
가끔, 웹이나 앱을 처음 들어가게 된 경우에, 웹에 대한 설명을 하기 위해서 웹이나 앱 위에 투명한 검정색 팝업창을 전체크기로 해서 설명을 적어 놓은 기능을 보신 적 있으실 겁니다.
이걸 'dim'이라고 합니다.
투명한 색을 전체 배경으로 하는 CSS 사용 키워드
background-color: rgba(0, 0, 0, 0.3);rgba(적색, 녹색, 청색, 투명도)를 각 입력값으로 받습니다. 맨 마지막의 투명도의 값은 0~1 사이의 값을 가집니다.
1이 투명하지 안게 되는 쪽입니다. 적색, 녹색, 청색으로 색을 변경할 수 있습니다. 색의 강도는 0~255의 값으로 강도를 조절할 수 있습니다.
예시)
예시 코드
HTML
<!DOCTYPE html>
<head><!-- ...--></head>
<body>
<h1>투명한 배경을 주고, 설명</h1>
<div class="init_desc"></div>
</body>
</html>CSS
.init_desc {
position: absolute;
background-color: rgba(0,0,0,0.3);
width: 100%;
height: 100%;
top:0;
left:0;
}
감사합니다.
728x90
'CSS' 카테고리의 다른 글
| [CSS]input, button 포커싱 또는 클릭 시 테두리 지우기 (0) | 2021.02.19 |
|---|---|
| [CSS]글자 밑줄 긑기 및 포인터 클릭 아이콘으로 변경 (0) | 2021.02.18 |
| [CSS] 글자가 길어서 영역 밖으로 벗어났을 때 생략처리 방법. (0) | 2021.02.12 |
| [HTML] 숫자만 입력받기 및 숫자 최대값 최소값 입력 제한하기 (0) | 2021.02.09 |
| css 폰트 단위 (0) | 2021.01.26 |
댓글