> 웹 프론트엔드 > CSS 튜토리얼 > 배경 소개 및 기능: CSS에서 투명

배경 소개 및 기능: CSS에서 투명

黄舟
풀어 주다: 2019-11-25 11:17:05
원래의
22966명이 탐색했습니다.

때때로 CSS를 보면 background:transparent로 정의된 일부 CSS 속성을 볼 수 있습니다. 배경이 투명하다는 뜻이죠. 실제로 배경의 기본 색상은 투명 속성입니다.

예를 들어 요소가 다른 요소를 덮고 있는 경우 아래 요소를 표시하려면 위 요소의 배경을 투명하게 설정해야 합니다.

권장 매뉴얼: css 온라인 매뉴얼

다음은 css

1에서 background:transparent의 역할을 소개합니다. 배경 소개

배경은 하나의 명령문에서 모든 배경 속성을 설정하는 데 사용됩니다. .

가능한 값:

background-color
background-image
background-repeat
background-attachment
background-position
로그인 후 복사

예를 들어

background : transparent none repeat scroll 0% 0%
로그인 후 복사

는 각각

배경 속성: 배경색, 배경 이미지, 배경, 배경 반복 여부, 브라우저로 스크롤, 배경, 평면 위치, 배경, 수직 위치

를 나타냅니다.
background : background-color || background-image || background-repeat || background-attachment || background-position
로그인 후 복사

위 CSS에 대한 설명

transparent   表示透明无颜色,是background-color 的默认值
none   表示没有设置背景图片
repeat   表示图片重复
scroll   表示背景图片随浏览器下拉而滚动
0%   水平位置在x0
0%   垂直位置在y0
로그인 후 복사
추천 관련 기사:
1.CSS에서 배경은 무엇을 의미하나요? 배경 사용법에 대한 자세한 설명2.
투명 속성을 사용하여 CSS에서 투명도를 설정하는 방법은 무엇입니까? 투명 속성을 사용하여 다양한 삼각형 그리기(코드 예시) 관련 영상 튜토리얼:
1.
CSS 영상 튜토리얼 - Jade Girl Heart Sutra Edition

2 배경색의 역할:투명 is transparent 요소의 이벤트는 해당 요소에 의해 차단됩니다. 트리거한 개체에 포커스가 없으면 이벤트가 처리를 위해 투명 요소로 교환되고 그렇지 않으면 이벤트가 발생합니다. 포커스가 있는 요소는 포커스가 있는 요소에 의해 방출됩니다. 포커스가 있는 개체는 처리되고 교환되지 않으며 포커스가 있는 요소에 따라 버블링됩니다. 1 예를 들어 다음 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+");";
로그인 후 복사

주로 다음 두 줄의 코드에서 위 코드의 마지막 두 문장이 없으면 마스크 뒤의 요소에 대해 연산을 수행할 수 있습니다. 차폐 효과는 없지만 이 작업은 제한적입니다. 특히 텍스트, 그림, 버튼 등과 같은 집중된 요소에만 작업할 수 있습니다.

2. 예를 들어 다음 DIV

<div style="border:1px red solid;width:100px;height:100px" onclick="alert(1)">123</div>
로그인 후 복사

일반적으로 이 div의 아무 곳이나 클릭하면 경고가 발생하지만 배경색이 투명한 요소로 덮여 있는 경우에만 경고할 수 있습니다. 123을 클릭하세요. 텍스트에 초점이 맞춰질 수 있으므로 다른 요소도 마찬가지입니다.

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿