인터넷, 웹 디자인
CSS 배경 투명성입니다. CSS와 투명 배경이나 텍스트
CSS3 웹 디자이너의 출현과 함께 여러 가지 방법으로 작업을보다 쉽고 논리적되었다 : 결국, 당신이 지금 정말 유연 자주 자바 스크립트에 의존, 어떤 객체를 정의 할 수 있습니다. 의 당신이 배경의 투명도를 조정해야한다고 가정 해 봅시다 - CSS는 즉시 여러 가지 옵션을 제공합니다.
속성들의 세트에 의해 정의 된 배경 (배경 이미지, 배경 위치 배경 사이즈, 배경 반복 배경-첨부 배경 출처, 배경 클립, 배경색) 특성에 따라 개별적으로 할당되거나 결합 될 수있는 각각의 배경. 우리가 구체적으로 그들 각각을 살펴 보자.
배경 색 속성
CSS에서 배경 색상은 헥사 코드, 색상 이름 또는 RGB-항목을 사용 : 여러 가지 방법으로 설정할 수 있습니다. CSS3에서 대신 RGBA와 RGB-기록 옵션의 사용이 가능하게되었다.
배경 색상 : #의 FFDAB9 16 진수 색상 코드는 격자 후 속성에 기록됩니다. 이 항목의 문자가 같은 쌍이 경우, 코드는 일반적으로 약간의 컷 : #의 ccff00는 #의 (CF0)과 같이 쓸 수있다 :
몸 {배경 색 : #의 (CF0) ;}.
이름은 가장 이국적인 색상입니다. 예를 들어, 표준 빨간색과 당신이 NavajoWhite (#FFDEAD) 또는 Honeydew2 (# E0EEE0)를 사용할 수 있습니다 흰색에 추가 :
몸 {배경 색 : 보라색; }.
후자의 옵션은 RGB 또는 RGBA 항목은 색상뿐만 아니라 CSS 배경의 투명도뿐만 아니라 지정할 수 있지만, 메소드는 9보다 오래된 IE 버전에서 작동합니다. 다른 브라우저는 투명성과 일반 버전을 인식하고 있습니다. W3C의 표준에 따라 여전히 대신 평소 RGB의 RGBA 사용하는 것이 바람직하다.
RGBA 배경의 마지막 값은 1 (불투명) 0 (투명)의 투명도를 설정한다.
어떤 특별한 가치가있다. 배경 색상은 HSL 및 HSLA를 사용하여 설정할 수 있습니다. 모두 CSS3에 추가 된, 따라서 IE 버전 9 이상 지원되지 않습니다. 실시 예는 단지 다른 형식으로 동일한 RGB 또는 RGBA : 색조 (그늘 -도 주어진다 컬러 휠 값), 포화 (포화 - 0 내지 100 퍼센트로 색 강도), 명도 (명도 - 휘도, 포화를 매개 마찬가지로 측정 ).
배경 이미지 속성
투명 배경의 대부분의 크로스 브라우저 버전 -이 이미지를 사용하는 것입니다. CSS3에서, 당신은 더 많은 이미지를 설정할 수 있습니다,이 쉼표를 통해 이루어집니다. 예 :
{배경 - 신체 이미지 : URL (bg1.png), URL (bg2.png)}.
심지어 IE8을 지원하는이 방법. 레이아웃에 사용되는 고무의 배경에 여러 이미지. 중요한 것은, 사용자가 단순히 이미지를 업로드 할 수있는, 모든 이미지를 사용하여 CSS의 배경 색상을 설정하는 것을 잊지 마세요.
배경 위치 속성
당신이 배경 기기를 설정 이미지를 사용하는 경우, CSS는 화면의 아무 곳이나 이미지를 배치 할 수 있습니다. 기본적으로 이미지가 왼쪽 상단에 위치하고 있습니다. 속성은 구두 지시 (위, 아래, 오른쪽, 왼쪽), 숫자 (이자, 픽셀과 다른 단위) 중 하나를합니다. 이 경우에, 당신은 수평 및 수직이 개 값을 지정해야합니다 :
배경 크기 속성
가끔은 CSS 배경을 늘리거나 크기를 줄일 필요가있다. 이렇게하려면 속성 배경 - 크기 및 픽셀 또는 백분율로 설정할 수있는 배경의 크기 및 다른 단위를 사용합니다.
이 속성으로, 몇 가지 문제가 있습니다 : 브라우저 접두사의 이전 버전에 대한 배경 지식의 올바른 표시를 사용하는. 물론, 현재 버전은 완전히이 속성을 지원하며, 특정 속성에 대한 필요성이 사라졌다.
배경 - 첨부 파일 속성
이 속성은 스크롤하면서 배경 이미지의 동작을 지정합니다. 그래서, (상속,이 문서에서 설명하는 모든 속성에 대한 총 포함하지 않음) 3 개 값을 사용할 수 있습니다 :
- 고정 - 고정의 배경에 사진이 있습니다;
- 스크롤 - 요소의 나머지 부분과 배경 스크롤;
- 지역 - 스크롤 콘텐츠가있는 경우 배경 이미지가 스크롤됩니다. 프레임의 내용을 넘어 배경은 고정되어있다.
사용 예 :
본체 {배경-부착 고정}.
현재 파이어 폭스는 지난 특성 (로컬)를 지원하지 않습니다.
배경 - 기원 속성
이 속성은 위치 요소에 대한 책임이 있습니다. 초기 브라우저는 접두어를 사용해야합니다. 속성 자체는 세 개의 매개 변수가 있습니다 :
- 고려 프레임의 두께를 고려하면서 패딩 박스는, 에지 패턴에 대하여 위치되고;
- 경계선이 될 수 있다는 점에서 이전의 다른 경계 박스 특성은 완전히 또는 부분적으로 중첩 패턴;
- 컨텐츠 박스 위치 이미지의 내용을 pryavyazyvaya.
여러 값을 지정할 경우, 브라우저는 자신의 방식으로 반응 할 수 있습니다 : 파이어 폭스와 오페라는 첫 번째 옵션을 인식.
배경 반복 속성
배경 화상이 지정되어있는 경우 원칙적으로, 이는 수평 또는 수직으로 반복되어야한다. 이를 위해 및 속성 배경 반복을 사용했다. 따라서, 블록 배경, 그러한 속성이 포함 CSS는 여러 매개 변수 중 하나를 사용할 수 있습니다 :
- 더 - 반복 - 이미지는 단일 버전의 페이지에 표시되지 않습니다;
- 반복 - 배경은 x와 y 반복된다;
- 반복-X를 - 수평 방향으로 만;
- 반복-Y - 세로 방향으로 만;
- 공간 - 배경 반복하지만, 공간이 사진 사이에 기입하는 것은 불가능 인 경우 빈 표시된다
- 라운드 - 그것은 전체 사진의 전체 영역을 채우지 않을 경우 이미지가 조정됩니다.
속성의 예 :
몸 {배경 - 반복 : 아니 - 반복 반복} - 유사한 배경 - 반복 : 반복-Y.
배경 클립 속성
이 속성은 (점선 프레임의 경우, 예를 들어)의 경계에서 배경의 동작을 정의합니다 :
- 패딩 박스 - 블록의 내부에 표시되는 배경;
- 국경 박스 - 이미지는 프레임 워크에서 제공;
- 컨텐츠 상자 - 배경에 그림 만 내용에서 나타납니다.
사용 예 :
몸 {배경 클립 : 컨텐츠 - 상자;}.
크롬과 사파리는 -webkit- 접두사가 필요합니다.
불투명도 속성 및 필터
CSS 속성은 모든 브라우저에서 작동합니다 - 불투명도 속성은 배경의 투명도를 설정할 수 있습니다. 이 값은 0.0부터 1.0까지 포함하는 범위로 설정되어있다. 이 경우 CSS 배경의 투명도를 설정할 수 있습니다 대신 0.3의 어떤 정수 값은 0.3 쓰기에 충분하지 않습니다 :
.block {배경 - 이미지 : 홈페이지 ( img.png); 불투명 : 0.3;}.
배경 불투명도를 설정하려면, CSS 필터 속성을 사용, 심지어 아홉 번째 버전은 아래 IE에 적합합니다 :
.block {배경 - 이미지 : 홈페이지 ( img.png); 필터 : 알파 (불투명도 = 30)}.
불투명도를 사용하여 명확뿐만 아니라 배경이되고, 또한 장치 내부의 모든 요소 때 : 이러한 경우에, 불투명도 값은 불투명도가 RGBA 상속을 통해 서로 다른 투명도 속성 설정 것을 0과 100 주 사이에 설정된다.
항상 CIS 브라우저 및 기타 국가에 대한 사용 통계를 모니터링 할 수 있습니다. 모든 DTP의 가장 큰 문제 - IE의 이전 버전은, 그들은 당신이 전체 범위의 CSS3를 사용하는 것을 허용하지 않습니다. 레이아웃에서 브라우저가 어떤 CSS 속성을 지원하는지 여부를 확인 특별한 서비스를 사용하는 것을 잊지 마세요. 당신은 브라우저의 이전 버전을 설치할 수없는 경우, 온라인으로 여러 브라우저에서 사이트 작업을 확인하는 서비스를 찾을 수 있습니다.
Similar articles
Trending Now