728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<title>background-color</title>
<meta name="viewoirt" content="wi" charset="UTF-8">
<style>
div:nth-child(1) {
width: 300px;
height: 300px;
/* background-color : 배경 색상 지정*/
background-color: rgba(255, 0, 0, 50%);
/* 리터럴(Literal : red, blue, orange, black, white 등*/
/* RGB : rgb(a, b, c) 함수 이용, 각 빨간색, 초록색, 파란색의 정도를 (0~255)로 나타낸다.*/
/* RGBA : rgba(a, b, c, d)함수 이용. 위 rgb(a, b, c) 함수 처럼 사용하되, d값은 0%~100%값으로 불투명도 지정.(0% 완전투명 ~ 100% 완전 불투명)*/
/* HEX : #rrggbb 형식으로 사용. rgb함수에서 사용하는 값을 16 진수로 전환하여 사용하는 방식. 가령, rgb(255, 255, 255)는 #ffffff 와 같다*/
/* HEX(0) : #rrggbboo 형식으로 사용. 기본 hex사용 방ㅇ법과 같으니 뒤에 불투명도를 지정하는 oo값을 함께 사용한다. (00 부터 ff까지*/
position: absolute;
z-index: 1;
}
div:nth-child(2) {
top: 150px;
left: 150px;
width: 300px;
height: 300px;
background-color: rgb(50, 100, 200);
position: absolute;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
728x90
반응형
'정보 > WEB' 카테고리의 다른 글
| box-shadow(박스그림자) (0) | 2022.12.21 |
|---|---|
| border(테두리) (0) | 2022.12.21 |
| style(중간정렬하기) (0) | 2022.12.21 |
| style활용(회원가입창) (0) | 2022.12.21 |
| style활용(신호등모양배열) (0) | 2022.12.21 |