고정 영역을 제외한 전체 화면을 어둡게 합니까?
사용자가 클릭할 위치를 정확하게 안내하는 튜토리얼을 만들고 싶습니다.저는 화면 전체를 커버하려고 합니다.<div>고정된 특정 영역을 제외한 모든 요소를 어둡게 합니다.width,height,top그리고.left.
문제는 부모님의 계획을 "취소"할 방법을 찾을 수 없다는 것입니다.background-color(투명하기도 함).
아래 캡처된 사진에서hole어떤 것도 없이 있어야 하는 디브입니다.background-color그것의 부모님의 것을 포함해서.
이것이 가능할까요?아이디어 있어요?
#bg{
background-color:gray;
opacity:0.6;
width:100%;
height:100vh;
}
#hole{
position:fixed;
top:100px;
left:100px;
width:100px;
height:100px;
}<div id="bg">
<div id="hole"></div>
</div>다음은 제가 달성하고자 하는 것에 대한 모형 이미지입니다.
당신은 단 하나로 그것을 할 수 있습니다.div그리고 그것을 주세요.box-shadow.
편집: @Nick Shvelidze가 지적했듯이, 당신은 추가하는 것을 고려해야 합니다.pointer-events: none
추가된vmax에 대한 가치.box-shadow@프린츠혼이 시사한 바야흐로
div {
position: fixed;
width: 200px;
height: 200px;
top: 50px;
left: 50px;
/* for IE */
box-shadow: 0 0 0 1000px rgba(0,0,0,.3);
/* for real browsers */
box-shadow: 0 0 0 100vmax rgba(0,0,0,.3);
pointer-events: none;
}<div></div>필요한 곳에 구멍이 뚫린 경로로 채워진 SVG를 만들 수 있습니다.하지만 모든 클릭이 중첩된 svg를 대상으로 하기 때문에 당신보다 클릭을 처리할 방법을 찾아야 할 것 같습니다.나는document.getElementFromPoint여기서 당신을 도울 수 있습니다. mdn
이것은 또한 @Ville Koo의 대답과 유사하게 수행될 수 있지만 경계가 있습니다.
div {
border-style: solid;
border-color: rgba(0,0,0,.3);
pointer-events: none;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
border-width: 40px 300px 50px 60px;
}<div></div>CSS 속성을 사용하여 Ville Koo의 답변과 동일한 결과를 얻을 수 있습니다.브라우저 지원이 우수하며 IE8+에서도 작동합니다.윤곽선은 경계와 구문이 동일하지만 경계가 공백을 차지하지 않는 것과 달리 내용 위에 그려집니다.
IE9+의 경우에도 교체할 수 있습니다.99999px와 함께calc(100 * (1vh + 1vw - 1vmin)).
이 접근법의 단점은outline의 영향을 받지 않습니다.border-radius.
데모:
div {
position: fixed;
width: 200px;
height: 200px;
top: 50px;
left: 50px;
/* IE8 */
outline: 99999px solid rgba(0,0,0,.3);
/* IE9+ */
outline: calc(100 * (1vw + 1vh - 1vmin)) solid rgba(0,0,0,.3);
/* for other browsers */
outline: 100vmax solid rgba(0,0,0,.3);
pointer-events: none;
}<div></div>여기 @VilleKoo css를 사용한 간단한 jQuery 코드가 있습니다.
var Dimmer = (function(){
var el = $(".dimmer");
return {
showAt: function(x, y) {
el
.css({
left: x,
top: y,
})
.removeClass("hidden");
},
hide: function() {
el.addClass("hidden");
}
}
}());
$(".btn-hide").click(function(){ Dimmer.hide(); });
$(".btn-show").click(function(){ Dimmer.showAt(50, 50); });.dimmer {
position: fixed;
width: 200px;
height: 200px;
top: 50px;
left: 50px;
box-shadow: 0 0 0 1000px rgba(0,0,0,.3); /* for IE */
box-shadow: 0 0 0 100vmax rgba(0,0,0,.3); /* for real browsers */
pointer-events: none;
}
.hidden { display: none; }<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
<input type="text">
<select name="" id=""></select>
<input type="checkbox">
</div>
<div>
<input type="text">
<select name="" id=""></select>
<input type="checkbox">
</div>
<div>
<input type="text">
<select name="" id=""></select>
<input type="checkbox">
</div>
<div>
<input type="submit" disabled>
</div>
<input type="button" value="Hide" class="btn-hide">
<input type="button" value="Show" class="btn-show">
<div class="dimmer hidden"></div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</body>
</html>#bg {
background-color: gray;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99998;
}
#hole {
position: fixed;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
z-index: 99999;
}
언급URL : https://stackoverflow.com/questions/45143916/dim-entire-screen-except-a-fixed-area
'sourcecode' 카테고리의 다른 글
| antMatcher와 mvcMatcher의 차이 (0) | 2023.08.16 |
|---|---|
| Array.PowerShell 어레이 찾기 (0) | 2023.08.16 |
| 웹킷을 C/C++/Win32 응용 프로그램에 내장하는 방법은 무엇입니까? (0) | 2023.08.16 |
| Android 에뮬레이터가 시작되지 않고 "잘못된 명령줄 매개 변수"가 표시됩니다. (0) | 2023.08.16 |
| MariaDB 쿼리가 작동하지 않습니다. 옵티마이저 버그? (0) | 2023.08.16 |