background

            background-color
            background-image
            background-size
            background-repeat
            background-attachment
            background-position

배경의 색, 이미지의 삽입, 사이즈, 위치, 이미지의 반복정보, 스크롤에 따른 이미지의 반응 등을 위와 같이 조절할 수 있다.

축약형은 다음과 같음

background: tomato, url('사진.png') no-repeat fixed center;

filter

css의 최신기능이며
그래픽 프로그램 기능의 코드화라고 생각하면됨.
원본이미지는 유지하면서 코드를 통해 효과를 부여.

움직이는 이미지(ex:구글맵),동영상에도 실시간으로 필터를 줄 수 있다는 자오1점이 있다.

img{
filter:grayscale(50%)blur(1px);
}

이런식으로 흑백과 블러를 줄 수 있다.

 img{
            transition: all 1s;
        
        }

-> 부드럽게 필터를 적용(천천히) 하고싶을때 사용

 img:hover{

->호버링 하고 있을때 필터가 적용됨