기초) background 속성 및 투명도 RGBa 정리

 

 

 

 

RGBa

투명도 조절

 

 

투명한 효과가 필요할 때

transparent로 처리하지만

 

투명도의 정도와 색상을

조절하고 싶을 때는 rgba를 쓴다.

 

각 색상의 수치는 숫자

0부터 255까지로 표현하고

(0 : 가장 어두운색

255 : 가장 밝은 색)

 

마지막 a(알파)의 수치는

0부터 1사이의

소수점으로 입력한다.

 

 

---

 

{background}

 

 

① 이미지 삽입

{background-image:url();}

 

 

 

② 삽입된 이미지의 반복 여부

{ background-repeat : ;}

 

repeat; (기본 값)

no-repeat; (반복 노노)

repeat-x (가로 축 반복)

repeat-y (세로 축 반복)

 

 

 

③ 배경 색 설정

{background-color : ;}

 

색상 값으로,

red / #ff02f3 / transparent / rgba

등이 올 수 있다

 

 

 

④ 배경 위치 변경

{background-position:;}

 

 

지난 시간에 배운 포지션과 달리

우측 상 하단이나 좌측 하단을

시작 좌표로 쓸 수 없으며

 

언제나주축이 되는 시작 지점은

박스의 11시 방향 모서리!

 

absolute처럼

브라우저가 기준이 아닌

relative처럼

박스가 기준!

 

 

 

X축과 Y 축의 값을 넣어야 하며

값 넣는 방법은 총 네 가지

 

 

ⓐ 문자

 

center

right top;

left bottom;

etc

 

 

 

ⓑpx

 

10px 10px;

 

 

 

ⓒ %

박스의 총 영역 대비 %

 

10% 20%;

 

 

 

ⓓ 위 세 가지 섞어서

10px bottom;

20% 15px;

 

 

---

 

 

위 내용들을 모두 사용한

샘플 코드

 

 

div {
     background-image:url('image2.PNG'); background-repeat:no-repeat;
     background-color:rgba(255,0,0,0.3); background-position:20% 50px;
     width:500px; height:500px; border: 10px solid red;}

 

 

하지만 위처럼

속성을 하나하나 나열하면

코드가 길어지고 지저분해진다.

 

---

 

 

*위 모든 걸 한 번에 쓰는 법*

 

 

 

샘플 코드

div { background:url('image2.PNG') no-repeat right 50% #f00;}

 

 

속성으로

background :를 주고

 

 

값을

이미지 파일 url / 반복 여부 /

위치 세팅 / 컬러 지정

순으로

 

 

따옴표 없이 중간에 한 칸씩 띄우며

연속해서 적어주고 마지막에 ;