5 알아 두어야 할 CSS 속성

배경 이미지, 테두리 이미지, 마스킹 및 클리핑 속성과 같은 CSS 속성이 있습니다. 이미지를 직접 추가하십시오. 웹 페이지에 연결하고 동작을 제어합니다. 그러나 덜 자주 언급되는 이미지와 관련된 CSS 속성도 있습니다. 추가 된 이미지 작업 HTML 태그, 웹 페이지에 이미지를 추가하는 기본 방법.

이 후자의 특성에 대한 직업 설명은 이미지 그림자 제어하기 에 선명도 설정, 추가 된 이미지의 모양과 위치를 더 잘 제어 할 수있게되었습니다. 꼬리표. 하나씩 보자..

1. 다음으로 이미지를 선명하게 만드십시오. 이미지 렌더링

이미지가 업 스케일되면 브라우저 이미지를 부드럽게합니다., 그래서 그것은 pixelated 보이지 않습니다. 그러나 이미지와 화면의 해상도에 따라 이것은 항상 최고가 아닐 수도 있습니다. 이 브라우저 동작을 이미지 렌더링 재산.

이 잘 지원 된 속성 이미지 크기를 조정하는 데 사용되는 알고리즘을 제어합니다.. 두 가지 주요 값은 다음과 같습니다. 선명한 가장자리 과 픽셀 화 된.

그만큼 선명한 가장자리 값 픽셀 간의 색상 대비를 유지합니다.. 다시 말하면, 이미지는 부드럽게 처리되지 않습니다. 픽셀 아트웍에 적합.

언제 픽셀 화 된 이 사용되면 픽셀의 근처 픽셀은 외모를 맡다, 그것들을 같이 생각하게 만든다. 하나의 큰 픽셀을 형성하다, 고해상도 스크린에 적합.

아래의 GIF에서 꽃의 가장자리를 자세히 살펴 본다면 정규식과 일반형의 차이를 볼 수 있습니다. 픽셀 화 된 영상.

 img 이미지 렌더링 : 픽셀 화;  

2. 이미지 스트레치 물체 적합

그만큼 있다, 덮개, 가득 따르다 가치는 모두 익숙하므로 우리는 배경 크기 배경 이미지가 속한 요소를 채우는 방법을 제어하는 ​​속성. 그만큼 물체 적합 속성은 그것과 매우 비슷하다. 컨테이너 내부의 이미지 크기.

그만큼 있다 값 컨테이너 안에 이미지가 들어있다.. 덮개 동일하지만 이미지와 컨테이너의 종횡비가 일치하지 않으면 이미지가 클리핑됩니다.. 가득 따르다 이미지가 용기를 늘리고 채우다.. 축소 이미지의 가장 작은 버전을 선택합니다. 표시.

 
  #container width : 300px; 높이 : 300px;  img width : 100 %; 높이 : 100 %; object-fit : 포함;  

3. 다음과 같은 이미지 이동 물체 위치

보완과 유사하게 배경 위치 의 자산 배경 크기, 거기에 물체 위치 재산 물체 적합, 너무.

그만큼 물체 적합 재산 이미지를 움직입니다. 이미지 컨테이너 내부 지정된 좌표에. 좌표는 다음과 같이 정의 할 수 있습니다. 절대 길이 단위, 상대 길이 단위, 키워드 (상단, 왼쪽, 센터, 바닥, 과 권리), 또는 유효한 조합 (상단 20px 우측 5px, 가운데 오른쪽 80px).

 
  #container width : 300px; 높이 : 300px;  img width : 100 %; 높이 : 100 %; object-position : 150px 0;  

4. 다음과 같은 위치에 이미지를 배치하십시오. 수직 정렬

우리는 때때로 (본질적으로 인라인 인) 텍스트 문자열 옆에 정보 또는 장식 추가. 이 경우, 텍스트와 이미지 정렬하기 원하는 위치로 이동하는 것은 다소 힘들 수 있습니다. 어떤 속성을 사용해야할지 모르는 경우.

그만큼 수직 정렬 재산은이다 표 세포만으로 독점적이지는 않다.. 또한 인라인 상자 내부의 인라인 요소를 정렬 할 수 있으므로 텍스트 한 줄에 이미지 정렬. 인라인 요소에 적용 할 수있는 상당한 수의 값이 필요하므로 선택할 수있는 옵션이 많습니다..

 
 PDF  
 

5. 다음과 같은 그림자 이미지 filter : drop-shadow ()

텍스트와 상자에서 눈에 띄지 않게 사용할 때 그림자는 웹 페이지에 생명을 불어 넣을 수 있습니다. 이미지의 경우에도 마찬가지입니다.. 핵심 모양 및 투명 배경이있는 이미지 그로부터 이익을 얻을 수있다. 그림자 CSS 필터.

그것의 논쟁은 그림자 관련 CSS 속성의 값과 비슷합니다. (텍스트 그림자, 상자 그림자). 처음 두 개는 수직 및 수평 거리 그림자와 이미지 사이에, 세 번째와 네 번째는 흐림 그리고 그림자의 확산 반경, 마지막 하나는 그림자 색.

처럼 텍스트 그림자, 그림자 또한 그림자를 만듭니다. 속박 된 물건. 따라서 이미지에 적용되면 그림자는 이미지의 보이는 부분의 모양을 취합니다..

 img 필터 : 드롭 섀도우 (0 0 5px blue);  

읽기 : CSS3 이미지 반영 [CSS3 팁]