CSS 배경 투명도. CSS를 사용하여 투명한 배경 또는 텍스트
CSS3의 출현과 함께 여러 측면에서 레이아웃 디자이너의 작업실제로 더 간단하고 논리적이되었습니다. 사실 JavaScript를 사용하는 것이 아니라 오브젝트를 실제로 유연하게 설정할 수 있습니다. 배경의 투명도를 조정해야한다고 가정 해 봅시다. CSS는 몇 가지 옵션을 즉시 제공합니다.
배경은 일련의 속성 (배경 이미지,background-position, background-size, background-repeat, background-attachment, background-origin, background-clip, background-color)을 가지고 있습니다. 각각을 더 자세히 분석해 보겠습니다.
배경색 속성
CSS에서는 16 진수 코드, 색상 이름 또는 RGB 레코드를 사용하여 여러 가지 방법으로 배경색을 지정할 수 있습니다. CSS3에서는 RGB 레코드 대신 RGBA 옵션을 사용할 수있게되었습니다.
16 진수 색상 코드는 다음과 같이 작성됩니다.표 뒤에있는 속성 : background-color : # FFDAB9. 이러한 레코드의 문자가 쌍으로 일치하면 대개 코드가 약간 짧아집니다. # ccff00은 # cf0 :
body {background-color : # cf0;}.
이름은 가장 이국적인 색상입니다. 예를 들어, 표준 빨간색과 당신이 NavajoWhite (#FFDEAD) 또는 Honeydew2 (# E0EEE0)를 사용할 수 있습니다 흰색에 추가 :
몸체 {배경색 : 보라색}.
RGB 또는 RGBA 레코딩의 마지막 버전으로색상뿐만 아니라 CSS 배경의 투명도도 설정합니다. 그러나이 방법은 IE 버전 9 이상에서만 작동합니다. 다른 브라우저는 일반적으로 투명성 옵션을 인식합니다. W3C 표준에 따르면보다 일반적인 RGB 대신 RGBA를 사용하는 것이 좋습니다.
RGBA의 마지막 값으로 배경의 불투명도를 0 (투명)에서 1 (불투명)로 설정합니다.
좀 더 특이한 의미가 있습니다. 배경 색상은 HSL 및 HSLA를 사용하여 설정할 수 있습니다. 모두 CSS3에 추가 된, 따라서 IE 버전 9 이상 지원되지 않습니다. 실시 예는 단지 다른 형식으로 동일한 RGB 또는 RGBA : 색조 (그늘 -도 주어진다 컬러 휠 값), 포화 (포화 - 0 내지 100 퍼센트로 색 강도), 명도 (명도 - 휘도, 포화를 매개 마찬가지로 측정 ).
배경 이미지 속성
투명 배경의 가장 교차 브라우저 버전은 이미지 사용입니다. CSS3에서는 몇 개의 이미지라도 지정할 수 있으며 쉼표로 끝납니다. 예 :
body {background-image : url (bg1.png), url (bg2.png)}.
이 방법은 IE8에서도 지원됩니다. 배경으로 사용되는 여러 이미지가 고무 부과 용으로 사용됩니다. 중요한 것은 이미지를 사용할 때 CSS에서 배경색을 설정하는 것입니다. 사용자가 단순히 이미지를 부팅 할 수 없기 때문입니다.
background-position 속성
이미지를 사용하여 배경을 지정하는 경우블록을 사용하면 CSS를 사용하여 화면의 아무 곳에 나 그림을 배치 할 수 있습니다. 기본적으로 이미지는 왼쪽 상단 구석에 있습니다. 속성은 구두 지시 (상단, 하단, 왼쪽, 오른쪽) 또는 숫자 (백분율, 픽셀 및 기타 측정 단위) 중 하나를 사용합니다. 이 경우 수평 및 수직의 두 가지 값을 지정해야합니다.
background-size 속성
때로는 CSS를 사용하여 배경을 늘이거나그것의 크기를 줄이십시오. 이렇게하려면 background-size 속성을 사용하고 배경 크기는 픽셀 또는 백분율 및 다른 측정 단위로 지정할 수 있습니다.
이 속성에는 몇 가지 문제점이 있습니다. 이전 버전의 브라우저에서 배경을 올바르게 표시하려면 접두어를 사용해야합니다. 물론 현재 버전이이 속성을 완벽하게 지원하므로 특정 속성에 대한 필요성이 사라졌습니다.
background-attachment 속성
이 속성은 스크롤 할 때 배경 이미지의 동작을 지정합니다. 따라서 3 개의 값을 취할 수 있습니다 (상속을 고려하지 않고이 기사에 제시된 모든 특성에 공통).
- 고정 된 - 정지 된 배경에 대해 사진을 찍습니다.
- 두루마리 - 배경 요소가 나머지 요소와 함께 스크롤됩니다.
- 지방의 - 스크롤이 내용을 가지고 있으면 배경 이미지가 스크롤됩니다. 내용을 넘어서는 배경이 수정되었습니다.
사용 예 :
body {background-attachment fixed}.
현재 Firefox는 마지막 속성 (로컬)을 지원하지 않습니다.
background-origin 속성
이 속성은 요소 위치 지정을 담당합니다. 초기 버전의 브라우저에는 접두사를 사용해야합니다. 속성 자체에는 세 개의 매개 변수가 있습니다.
- 패딩 박스 프레임의 두께를 고려하여 가장자리에 대한 배경을 배치합니다.
- 국경 상자 경계 선이 배경을 완전히 또는 부분적으로 덮을 수 있다는 점에서 이전 속성과 다릅니다.
- 내용 상자 이미지를 위치시켜 콘텐츠로 가져옵니다.
여러 값을 지정하면 브라우저가 자신의 방식대로 반응 할 수 있습니다. Firefox와 Opera는 첫 번째 옵션 만 인식합니다.
background-repeat 속성
일반적으로 이미지에 의해 배경이 지정되면수평 또는 수직으로 반복해야합니다. 이를 위해 background-repeat 속성이 사용됩니다. 따라서 CSS에 이러한 속성이 포함 된 블록의 배경은 여러 매개 변수 중 하나를 가질 수 있습니다.
- 반복 없음 - 이미지가 단일 변형으로 페이지에 표시됩니다.
- 반복하다 - 배경이 x 및 y 축을 따라 반복됩니다.
- 반복 - x - 단지 수평으로;
- 반복 - y - 수직으로 만;
- 공간 - 배경이 반복되지만 공간을 채울 수 없으면 그림 사이에 이미지가 나타납니다.
- 둥근 - 전체 사진을 전체 영역으로 채울 수없는 경우 이미지의 크기가 조절됩니다.
속성을 사용하는 예 :
body {background-repeat : 반복 없음} - 유사하게 background-repeat : 반복 -y.
background-clip 속성
이 속성은 경계 아래에서 배경 동작을 정의합니다 (예 : 점선 프레임의 경우).
- 패딩 박스 - 배경은 블록 내에 엄격하게 표시됩니다.
- 국경 상자 - 이미지가 프레임 아래에옵니다.
- 내용 상자 - 배경 그림은 내용 내부에만 나타납니다.
사용 예 :
body {background-clip : content-box;}.
Chrom과 Safari는 -webkit- 접두어를 사용해야합니다.
불투명도 및 필터 속성
불투명도 속성을 사용하면 투명도를 설정할 수 있습니다.배경 - CSS 속성은 모든 브라우저에서 작동합니다. 값은 0.0 이상 1.0 이하로 설정됩니다. 이렇게하면 CSS 배경의 투명도를 설정할 수 있습니다. 정수 값없이 : 0.3 대신에 .3 :
블럭 {배경 이미지 : url (img.png); 불투명도 : .3;}.
배경 투명도를 설정하려면 9 번째 버전 아래의 IE에도 CSS가 적합합니다. 필터 속성을 사용하십시오.
블럭 {배경 이미지 : url (img.png); 필터 : 알파 (불투명도 = 30);}.
이 경우 불투명도 값은불투명도 속성은 RGBA의 유전성을 가진 투명도 설정과 다릅니다. 불투명도를 사용할 때는 배경이 투명해질뿐만 아니라 블록 안의 모든 요소도 투명합니다.
사용 통계를 항상 추적하십시오.CIS 및 기타 모든 국가의 브라우저 모든 레이아웃 제조 업체의 가장 큰 문제는 이전 버전의 IE입니다. CSS3를 최대한으로 사용할 수는 없습니다. 레이아웃을 만들 때 브라우저가 CSS 속성을 지원하는지 확인하는 특별한 서비스를 사용하는 것을 잊지 마십시오. 이전 버전의 브라우저를 설치할 수없는 경우 온라인상의 다른 브라우저에서 사이트 작동을 테스트 할 서비스를 찾으십시오.
</ p>>
