배경 설명:CSS에서 투명

不言원래의: 2018-06-12 11:20:253529검색

이 글에서는 주로 CSS의 배경:투명에 대한 설명을 소개합니다. 이제 필요한 친구들이 참고할 수 있도록 공유하겠습니다.

CSS에서 투명이란 무엇을 의미하나요? 이상한데 무슨 용도인가요? 이 글에서 자세히 설명하겠습니다. 필요하신 분들은 참고하시면 됩니다

가끔 CSS를 보면 몇몇 CSS 속성이 background:transparent로 정의되어 있는 것을 볼 수 있습니다. 배경이 투명하다는 뜻이죠. 실제로 배경의 기본 색상은 투명 속성입니다. 그래서 글을 쓰든 안 쓰든 똑같습니다. 학교에 다니고 있지만 현재는 인터넷에 접속할 수 없습니다. 웹 버전의 운영체제를 작성하는 과정에서 많은 문제가 발생했는데 그 중 많은 부분이 세부적이고 매우 번거로웠습니다. 최근에 제가 겪었던 문제에 대해 이야기하겠습니다.
우리 모두 알고 있듯이 기본적으로 이 p 스타일의 backgroungcolor 속성은 createelement를 사용합니다. 하하, p의 마스크를 만든다면 다음 코드를 보세요:

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

이건 마스킹이 많이 필요한 부분입니다. 보드 p를 설정한다는 것은 사용자가 웹 페이지에서 다른 요소를 조작하는 것이 차단된다는 의미입니다.

코드의 마지막 두 줄을 주로 살펴보겠습니다. 앞서 언급한 것처럼 p의 기본 backgroundcolor 속성은 투명합니다. 그러면 왜 굳이 검정색으로 설정해야 할까요(상관없습니다. 색상만 설정하면 됩니다). 투명하지 않고 빈 문자열이 될 수 없는 한 브라우저는 기본적으로 빈 문자열을 투명하게 처리하고 필터를 설정하여 투명하게 만듭니다.
직접 테스트해 보니 혼란스럽습니다. 처음에는 테스트 결과가 나왔으나 진정하고 생각한 후에 차이점을 발견했습니다. 위 코드의 마지막 두 문장이 없으면 요소에 대해 작업을 수행할 수 있습니다. 차폐 효과는 없지만 이 작업은 제한적입니다. 특히 텍스트, 그림, 버튼 등과 같은 집중된 요소에만 작업할 수 있습니다. 예를 들어 보겠습니다.

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

일반적인 상황에서는 이 p의 아무 곳이나 클릭하면 경고가 표시됩니다. 그러나 배경색이 투명한 요소로 덮여 있으면 123을 클릭해야만 경고할 수 있습니다. 왜냐하면 텍스트에 초점이 맞춰질 수 있기 때문입니다. 그런데 배경색이 투명한 요소의 이벤트는 해당 요소에 포함된 요소에 의해 차단됩니다. 트리거한 개체에 포커스가 없는 경우 이벤트는 처리를 위해 투명 요소로 교환되며 이 요소를 누르면 그렇지 않으면 포커싱된 이벤트는 교환 없이 포커싱된 개체에 의해 처리되고 버블은 포커싱된 요소에 따라 수행됩니다. (이해하기가 쉽지 않은 것 같습니다. 직접 더 많은 실험을 할 수 있습니다. 알겠습니다.) 이렇게 하면 모두가 이해할 수 있습니다. 이것이 마지막 두 문장이 필요한 이유입니다. 그래야만 웹 페이지 요소를 완전히 보호할 수 있습니다.

스타일을 투명 색상으로 설정하세요
때때로 위에서는

background:inherit;

라고 말합니다. 배경을 지워야 할 수도 있어서

background:transparent;

라고 썼습니다. 투명한 배경, 즉 제거

요소가 다른 요소를 덮고 있고 아래 요소를 표시하려면 위의 요소를 변경해야 합니다. 요소의 배경은 다음과 같습니다. 투명으로 설정

이 기사의 내용은 IE7.0에서 테스트를 거쳐 통과되었습니다.

위 내용은 이 기사의 전체 내용입니다. 모두의 공부 관련 내용은 PHP 중국어 웹사이트에 주목해주세요!

배경 설명:CSS에서 투명

관련 기사