이 글에서는 CSS에서 투명도를 설정하는 방법을 소개하겠습니다. 구체적인 내용을 살펴보겠습니다.
불투명도 및 투명도
정의에 따라 CSS의 불투명도 및 투명도는 이미지, 테이블 등 요소의 가시성을 정의합니다. 또는 RGBA(빨간색, 녹색, 파란색 알파) 색상 값입니다. 의미에 따르면 불투명도는 요소가 얼마나 불투명하거나 견고한지를 측정하는 반면, 투명도는 그 아래 레이어에 있는 내용을 얼마나 쉽게 볼 수 있는지를 측정합니다. 그럼에도 불구하고 동일한 방식으로 작동합니다. 100% 불투명은 요소가 완전히 표시된다는 것을 의미하고, 100% 투명은 완전히 보이지 않음을 의미합니다.
값비싼 소프트웨어를 사용하는 대신 CSS를 사용하여 이러한 효과를 만들 수 있습니다! 몇 가지 간단한 키 입력만으로 페이지에 있는 요소의 모양을 즉시 변경할 수 있으며 경우에 따라 마우스 포인터를 요소 위로 가져갈 때 반응하는 방식까지 변경할 수 있습니다.
불투명하고 투명한 이미지
이미지를 수정할 때 불투명도 속성은 0.0에서 1.0 사이의 값을 허용하며 후자는 기본값. 따라서 값이 낮을수록 이미지가 더 투명해집니다.
아래 예에서는 나란히 비교하기 위해 0.2, 0.5 및 1.0을 사용합니다.
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
} 참고: Internet Explorer 8 이하 버전에서는 아직 불투명도 속성을 인식하지 못하기 때문에 필터 속성을 사용합니다. opacity 속성을 사용하여 배경 및 모든 하위 요소를 포함하여 요소에 투명도를 추가할 수 있습니다. 예를 들어, 아래 상자(
및 그 하위 항목 대신 사용)에서는 모든 텍스트도 투명해집니다.
텍스트는 또한 배경색을 투명하게 푸시하므로 이것이 달성하려는 목표라면 다른 것을 수정할 필요가 없습니다. 이 효과를 얻으려면 다음 코드를 직접 사용할 수 있습니다.
div {
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
}
투명성을 위해 RGBA 사용
그러나 단지 배경 및 텍스트 또는 기타 하위 요소는 불투명하게 유지되므로 RGBA를 사용하여 이를 우회할 수 있습니다. 16진수 코드 작업에 익숙하다면 CSS에서 색상을 정의하는
다른 방법, 즉 RGB/RGBA 및 HSL/HSLA 색상에 대해 알아볼 수 있습니다.
RGBA는 빨간색, 녹색, 파란색 알파를 나타내며 알파 매개변수는 RGB 색상의 불투명도를 지정합니다. 따라서 RGBA 색상 값을 사용하면 텍스트가 검은색으로 유지되는 동안 배경의 불투명도를 설정할 수 있습니다. 값은 171,205,239이고 알파 매개변수는 투명도 또는 투명도를 정의합니다. 예:
div { background：rgba（171,205,239,0.3）/ *蓝色背景，不透明度为30％* / }
css 투명한 배경 이미지의 불투명 텍스트
불투명도와 투명도로 할 수 있는 또 다른 멋진 작업은 텍스트를 추가하는 것입니다. 아래 예와 같이 정말 부적절하거나 어두운 배경 이미지를 상쇄하기 위한 투명한 상자입니다.
이 간단하면서도 효과적인 스타일을 만들려면
요소를 사용하고 클래스 이름을 "Background" 및 "transbox"로 지정하세요. 첫 번째 카테고리는 배경 이미지와 테두리이고, 두 번째 카테고리는 별도의 배경색과 테두리입니다. 마지막으로 단락을 사용하여 텍스트를 추가합니다.
먼저 배경 이미지와 테두리가 있는
요소(class="배경")를 만듭니다. 그런 다음 첫 번째
안에 또 다른
(class="transbox")를 만듭니다.
요소에는 배경색과 테두리가 있습니다. div는 투명합니다. 투명한
에서는
요소 안에 텍스트를 추가했습니다.
다음은 우리가 사용한 코드입니다. 자신만의 이미지와 텍스트로 수정하고 테스트할 수 있습니다.
<html>
<head>
<style>
div.background {
background: url(green-tile.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
margin: 5%;
font-weight: bold;
font-family: Verdana;
font-size: 12px;
color: #000000;
}
</style>
</head>
<body>
<div>
<div>
<p>This is sample text placed in a transparent box.</p>
</div>
</div>
</body>
</html>Finally
불투명도 및 투명성이 있습니다. 순전히 미학적이거나 웹 페이지의 요소를 강조하는 등 다양한 용도로 사용할 수 있습니다. 이 모든 작업을 Photoshop이나 기타 사진 편집 소프트웨어에 의존하는 것보다 확실히 가장 저렴한 대안입니다!
위 내용은 CSS 투명도를 설정하는 방법은 무엇입니까? CSS의 다양한 투명도 설정 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
