오늘날 웹 사이트 디자인은진짜 예술. 특정 색상 및 크기의 페이지 요소 집합, 다양한 스타일의 글꼴 및 주제별 그림이 아닙니다. 사이트를 다른 사이트와 다르게 만들고 방문자의 관심을 끌고 특정 요소로 안내하기 위해 수많은 방법과 도구가 사용됩니다. 그중에는 매우 인기있는 CSS 속성 인 투명성이 있습니다. 이 기술은 매우 세련되고 효과적이므로 자주 사용됩니다. 사이트 페이지의 다양한 개체 (예 : 텍스트, 전체 블록 또는 그림)에 투명도를 추가 할 수 있습니다. 또한 다른 방식으로 달성됩니다. 아래에서 고려해 봅시다.
요소의 투명도 설정을위한 매개 변수
정도를 조정하는 매개 변수요소의 투명성, 여러. 디자인이 "조정 된"브라우저뿐 아니라 특정 목적에 따라 사용됩니다. 여기에는 다음 속성이 포함됩니다.
- 불투명;
- 필터;
- PNG 이미지를 배경으로.
투명성 CSS 속성 값 변경숫자가 클수록 요소의 투명도가 낮아집니다. 불투명도에서는 0에서 1까지, 필터에서는 10에서 100까지 다양합니다. 후자는 Interet Explorer 브라우저에 사용되며 다른 모든 경우에는 opacity 속성이 사용됩니다.
이미지 투명도 (변수)
마우스 커서로 요소를 가리킬 때 투명도가 나타날 때 옵션부터 시작하겠습니다.
이미지의 투명도를 설정하는 방법을 고려해 보겠습니다. CSS는 두 가지 옵션을 제공합니다. 이렇게하려면 다음과 같이 html 문서의 코드에 직접 등록해야합니다.
- 이미지의 경로를 나타냅니다.
- 호버가 아닌 투명도 매개 변수를 결정하십시오. 이렇게하려면 불투명도 및 필터 값을 작성하는 onmouseover 및 onmouseout 속성을 사용합니다.
CSS 문서에 동일한 특성을 작성할 수 있으며 소스 코드에 링크 만 추가 할 수 있습니다. 결과는 동일합니다.
텍스트 및 페이지 블록의 투명성
텍스트 또는 블록 (div 투명도)은css는 이미지 투명도를 만드는 것과 유사한 옵션을 사용할 것을 제안합니다. 즉, 필요한 매개 변수가 설정 될 포함 된 css 파일을 사용하는 것입니다. 더 쉬운 길을 갈 수 있습니다. div 스타일 블록 또는 텍스트 p의 스타일을 지정할 때 onmouseover 및 onmouseout 요소에 대해 다음 html 코드를 추가하십시오. 두 옵션 모두 작동하고 원하는 결과를 제공합니다.
일정한 투명성
경우에 따라 개체, 디자인 요소 또는 텍스트의 투명도를 영구적으로 설정해야합니다. 이 상황에서 솔루션은 마우스 위로 마우스를 가져가는 것보다 훨씬 쉽습니다.
CSS 요소의 경우 투명도가 설정됩니다.다음 코드로. div 스타일 블록에서 배경 값 (예 : # ff8800), 불투명도 (예 : 0.5), 너비 및 패딩을 작성합니다.
이미지의 경우 코드에 불투명도 및 필터 값을 입력하고 이미지 경로도 지정합니다.
RGBA 방법
다른 사용 사례도 있습니다.이 속성 css : 디자인 요소의 배경색에 투명도를 적용 할 수 있습니다. 이를 위해 RGBA 방법이 사용됩니다. 처음 세 글자는 기본 색상 (빨간색, 단색, 파란색)을 나타내고 마지막 글자는 투명도 수준을 설정하는 알파입니다. RGBA 형식을 사용하여 투명도를 지정하여 마지막 숫자에 표시합니다. 예를 들면 다음과 같습니다. background : rgba (240,2,33,0.4035).
결론
따라서 작업 과정에서 사용사이트의 디자인은 간단하지만 효과적인 CSS 속성 "투명도"이므로 최소한의 노력으로 그 요소를 더 흥미롭고 눈에 띄게 만들 수 있습니다. 투명도 특성을 지정하기위한 설명 된 옵션이 도움이 될 것입니다.
