CSS에서 배경의 의미와 기능:투명

투명함은 실제로 투명 속성을 의미합니다.
일반 사용 시나리오:
요소가 다른 요소를 덮고 다음 요소를 표시하려면 위의 배경을 변경해야 합니다. 요소가 투명으로 설정되어 있습니다

가끔 CSS를 보면 background:transparent로 정의된 일부 CSS 속성이 보입니다. 배경이 투명하다는 뜻이죠. 실제로 배경의 기본 색상은 투명 속성입니다. 그래서 글을 쓰든 쓰지 않든 마찬가지입니다. 저는 학교에 다니면서도 인터넷에 접속할 수 없어서 글을 쓰고 있습니다. 웹 버전의 운영 체제를 완성하면 꼭 게시하겠습니다. 작성 과정에서 많은 문제가 발생했는데 그 중 많은 문제가 세부적이고 매우 번거로웠습니다. 이제 최근에 발생한 문제에 대해 이야기하겠습니다. 아시다시피 createelement를 사용하여 새 div를 만듭니다. 기본적으로 이 div 스타일의 backgroungcolor 속성은 투명합니다. div용 마스크를 만든 후 다음 코드를 참조하세요. 코드를 복사하면 코드는 다음과 같습니다.

div.style.position="absolute"; 
div.style.width=document.body.clientWidth+"px"; 
div.style.height=document.body.clientHeight+"px"; 
div.style.left="0px"; 
div.style.top="0px"; 
div.style.zIndex="2000"; 
div.style.backgroundColor="black"; 
div.style.filter="alpha(opacity="+0+");";

이것은 마스크된 div에 대한 설정이 많기 때문에 사용자가 다른 요소를 조작할 수 없다는 의미입니다. 웹 페이지의 마지막 두 줄을 주로 살펴봅니다. 앞서 언급한 것처럼 div의 기본 backgroundcolor 속성은 투명합니다. 그러면 왜 검정으로 설정해야 하는 수고를 해야 합니까(그렇지 않습니까?) 중요합니다. 투명하지 않은 한 색상을 설정하고 빈 문자열이 될 수 없습니다. 브라우저는 기본적으로 빈 문자열을 투명하게 처리합니다. 필터를 설정하여 투명하게 만들었습니다. 처음에는 테스트 결과에 혼란스러웠지만, 마음을 진정시키고 생각해보니 차이점을 발견했습니다. 위 코드의 마지막 두 문장이 없으면 다음과 같이 요소를 조작할 수 있습니다. 즉, 차폐 효과는 없지만 이 작업은 제한적입니다. 특히 텍스트, 그림, 버튼 등과 같은 집중된 요소에만 작업할 수 있습니다. 예를 들어 보겠습니다. 다음과 같이 코드를 복사하세요.

<div style="border:1px red solid;width:100px;height:100px" onclick="alert(1)"123</div >

일반적으로 이 div의 아무 곳이나 클릭하면 알림이 표시되지만, 배경색이 투명한 요소로 덮여 있으면 123을 클릭해야만 알림이 표시됩니다. 텍스트에 포커스가 있을 수 있기 때문입니다. , 다른 요소에도 마찬가지입니다. 그런데 투명한 배경색을 가진 이 요소의 이벤트는 해당 요소에 의해 차단됩니다. 우리가 트리거한 개체에 포커스가 없으면 이벤트가 The로 교환됩니다. 투명 요소는 이 요소에 따라 처리되고 버블링됩니다. 그렇지 않으면 포커싱된 이벤트는 교환 없이 포커스가 있는 개체에 의해 처리되고 포커싱된 요소에 따라 버블링됩니다. 좀 더 실험해 보시면 아실 겁니다.) 스타일을 투명색으로 설정할 때 가끔 위에 작성한 복사 코드가 다음과 같은 경우가 있습니다. background: 상속; 그러면 아래에서는 배경을 지워야 할 수도 있으므로 다음과 같이 복사 코드를 작성했습니다. : background: transparent; transparent 배경이 제거됩니다. 한 요소가 다른 요소를 덮고 다음 요소를 표시하려면 위 요소의 배경을 투명으로 설정해야 합니다.

createelement를 사용하여 새 div를 만듭니다. 기본적으로 이 div 스타일의 backgroungcolor 속성은 투명합니다. 하하, div에 대한 마스크를 만들면 다음 코드를 참조하세요.
이것은 많은 마스크 div의 설정입니다.
우리는 주로 코드의 마지막 두 줄을 살펴봅니다. 앞서 말했듯이 div의 기본 backgroundcolor 속성은 투명하므로 왜 필요한가요? 검정색을 설정하기 위한 추가 단계로 이동합니다(상관 없음). 색상을 설정합니다. 투명하지 않은 한 빈 문자열일 수 없습니다. 브라우저는 기본적으로 빈 문자열을 투명하게 처리합니다. , 그리고 필터를 설정해 투명하게 만들었어요
제가 직접 실험을 해봤는데 처음에는 괜찮았어요. 테스트 결과가 많이 헷갈렸는데, 차분히 생각해보니 차이가 없었다면. 위 코드의 마지막 두 문장을 사용하면 마스크된 요소에 대해 작업을 수행할 수 있으며 이는 차폐 효과가 없음을 의미하지만 이 작업은 특히 텍스트, 그림과 같은 집중된 요소에 대해서만 작업할 수 있습니다. , 버튼 등을 예로 들어 보겠습니다.
일반적으로 이 div의 아무 곳이나 클릭하면 경고가 표시되지만, 배경색이 투명한 요소로 덮여 있으면 클릭해야만 경고가 표시됩니다. 123, 왜냐하면 텍스트가 포커스를 얻을 수 있고 다른 요소에도 동일하게 적용되기 때문입니다. 그런데 이 배경색은 투명합니다. 우리가 트리거한 개체에 포커스가 없으면 요소의 이벤트가 해당 요소에 의해 차단됩니다. , 이벤트는 처리를 위해 투명 요소로 교환되고 이 요소에 따라 버블링됩니다. 그렇지 않으면 포커스가 있는 이벤트는 포커스가 있는 요소에 의해 방출되고 버블은 다음과 같이 수행됩니다. (이해하기 쉽지 않은 것 같은데, 더 많은 실험을 해보면 이해할 수 있습니다)

위 내용은 CSS에서 배경의 의미와 기능:투명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!