사용자의 장치에서 가장 적합한 이미지의 해상도를 보여줄 수 있도록 한다.
콤마로 구분된 <image-set-option>
값 목록을 나타낸다.
<image-set-option>#
image-set()
함수의 매개 변수 타입을 나타낸다.
[ <image> | <string> ] [ <resolution> || type(<string>) ]
2차원 이미지를 나타낸다.
<url> | <image()> | <image-set()> | <cross-fade()> | <element()> | <gradient>
<url>로 외부의 리소스를 연결하거나 <image-set()>, <cross-fade()>, <element()> 값으로 생성된다. 또한 그라디언트도 가능하다.
현재 image()
는 지원하지 않는다.
두 가지 이상의 색상 간 점진적인 전환으로 구성된 특수한 유형의 이미지를 나타낸다.
background: linear-gradient(to right, #FF0000, #00FF00, #FFFF00);
선형 그라데이션
background: radial-gradient(#FF0000, #00FF00, #FFFF00);
원형 그라데이션
모든 함수를 표시하지 않을 수도 있다.
모든 속성을 표시하지 않을 수도 있다.
요소의 배경과 관련된 모든 속성을 한 번에 설정하는 속기 속성이다.
선택자를 갖는 요소에 배경 이미지를 설정한다.
이미지나 글꼴 등 리소스를 가리키는 문자열을 나타낸다.
<url()> | <src()>
src()
함수의 매개변수를 나타낸다.
src( <string> <url-modifier>* )
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
모든 속성을 표시하지 않을 수도 있다.
글꼴을 지정한다.
가상 요소로 생성할 콘텐츠를 설정한다.
인용 부호의 유형을 설정한다.
URL의 의미나 해석을 어떻게든 변경하는 타입이다.
url() 함수의 매개변수를 나타낸다.
url( <string> <url-modifier>* ) | <url-token>
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
URL의 의미나 해석을 어떻게든 변경하는 타입이다.
모든 함수를 표시하지 않을 수도 있다.
모든 속성을 표시하지 않을 수도 있다.
선택자를 갖는 요소에 배경 이미지를 설정한다.
요소의 클리핑 범위를 설정한다.
모든 함수를 표시하지 않을 수도 있다.
출력 장치의 해상도를 나타낸다.
@media print and (min-resolution: 500dpi) { }
이 구문은 미디어 쿼리에(media query)에서 값을 사용하는 예를 나타낸다. 500dpi
값을 <resolution>
으로 지정 했다. 그 밖에 <resolution>
값이 필요한 경우에는 아래 형식처럼 작성할 수 있다.
72dpi
40.45dpcm
10dppx
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
모든 속성을 표시하지 않을 수도 있다.
글꼴을 지정한다.
가상 요소로 생성할 콘텐츠를 설정한다.
인용 부호의 유형을 설정한다.
background-image: image-set( url("http://sample.devdic.com/parallax/images/bg_2880x1800.jpg") 1x, url("http://sample.devdic.com/parallax/images/bg_3200x2000.jpg") 2x);
Modules | ||
---|---|---|
Module Name | Status | Summary |
CSS Images Module Level 4 | 편집자 초안 |
Last review date: 2022-6-3 |