배경을 투명하게 만들기
인쇄 디자인에서 쉽게 할 수 있지만 웹에서는 할 수없는 작업 중 하나는 이미지 또는 색상이있는 배경에 텍스트를 오버레이하여 텍스트가 배경으로 희미 해 지도록 이미지의 투명도를 변경하는 것입니다. 그러나 CSS3 에는 엘리먼트의 불투명도를 변경하여 불투명 해 지도록 할 수있는 속성이 있습니다 : 불투명도.
불투명도 속성을 사용하는 방법
불투명도 속성은 0.0에서 1.0 사이의 투명도 값을 사용합니다.
0.0은 100 % 투명합니다. 그 요소 아래의 모든 것이 완전히 표시됩니다. 1.0은 100 % 불투명합니다. 요소 아래에 아무것도 표시되지 않습니다.
따라서 요소를 50 % 투명하게 설정하려면 다음과 같이 작성합니다.
불투명도 : 0.5;
실제 불투명도의 몇 가지 예를 참조하십시오.
이전 브라우저에서 테스트해야합니다.
IE 6도 7도 CSS3 불투명도 속성을 지원하지 않습니다. 하지만 너는 운이 좋지 않아. 대신 IE는 Microsoft 전용 속성 알파 필터를 지원합니다. IE의 알파 필터는 0 (완전히 투명 함)에서 100 (완전히 불투명)까지의 값을 허용합니다. 따라서 IE에서 투명도를 얻으려면 불투명도를 100으로 곱하고 스타일에 알파 필터를 추가해야합니다.
필터 : 알파 (불투명도 = 50);
실전 알파 필터보기 (IE 전용)
그리고 브라우저 접두어 사용
이전 버전의 Mozilla 및 Webkit 브라우저에서도 지원되도록 -moz- 및 -webkit- 접두어를 사용해야합니다.
-webkit-opacity : 0.5;
-moz-opacity : 0.5;
불투명도 : 0.5;
항상 브라우저 접두사를 먼저 넣고 유효한 CSS3 속성을 마지막에 넣으십시오.
구형 Mozilla 및 Webkit 브라우저에서 브라우저 접두어를 테스트하십시오.
이미지를 투명하게 만들 수도 있습니다.
이미지 자체에 불투명도를 설정하면 배경으로 희미 해집니다. 이것은 배경 이미지에 정말 유용합니다.
앵커 태그를 추가하면 이미지의 불투명도를 변경하여 호버 효과를 만들 수 있습니다.
a : 호버 img {
필터 : 알파 (불투명도 = 50)
필터 : progid : DXImageTransform.Microsoft.Alpha (불투명도 = 50)
-moz-opacity : 0.5;
-webkit-opacity : 0.5;
불투명도 : 0.5;
}
이 HTML에 영향을 미칩니다.
위 스타일과 HTML이 실제로 작동하는지 테스트하십시오.
이미지에 텍스트 삽입
불투명도를 사용하면 이미지 위에 텍스트를 배치하고 텍스트가있는 곳에서 이미지가 흐리게 표시되도록 할 수 있습니다.
이 기술은 약간 까다 롭습니다. 단순히 이미지를 희미하게 만들면 안되며 전체 이미지가 희미해질 수 있습니다. 또한 텍스트 상자도 사라지기 때문에 텍스트 상자를 희미하게 만들 수 없습니다.
- 먼저 컨테이너 DIV를 만들고 내부에 이미지를 배치합니다.
- 비어있는 DIV로 이미지를 따라 가십시오. 이것이 투명하게 만듭니다.
- HTML에 마지막으로 추가하는 것은 텍스트가 포함 된 DIV입니다.
여긴 내 개 샤스타 야. 그는 귀여워! - 이미지 위의 텍스트를 배치하기 위해 CSS 위치 지정을 사용하여 스타일을 지정합니다. 왼쪽에 텍스트를 놓았지만 왼쪽에 두 개를 변경하여 텍스트를 오른쪽에 놓을 수 있습니다 : 0; 오른쪽으로 속성 : 0; .
#image {
위치 : 상대적;
너비 : 170px;
높이 : 128px;
여백 : 0;
}
#text {
위치 : 절대;
상단 : 0;
왼쪽 : 0;
너비 : 60px;
높이 : 118px;
배경 : #fff;
패딩 : 5px;
}
#text {
필터 : 알파 (불투명도 = 70);
필터 : progid : DXImageTransform.Microsoft.Alpha (opacity = 70);
-moz-opacity : 0.70;
불투명도 : 0.7;
}
#words {
위치 : 절대;
상단 : 0;
왼쪽 : 0;
너비 : 60px;
높이 : 118px;
배경 : 투명;
패딩 : 5px;
}
보기 모양보기