사용자가 클릭 할 위치를 정확히 안내하는 튜토리얼을 만들고 싶습니다. 나는 함께 화면 전체를 커버하기 위해 노력하고있어 <div>
를 제외한 모든 요소 어두워집니다되는 특정 지역 고정에 width
, height
, top
와 left
.
문제는 부모를 “취소”하는 방법을 찾을 수 없다는 것 background-color
입니다 (또한 투명 함).
아래에 hole
있는 div 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
@Prinzhorn이 제안한 추가 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
답변
이것은 @VilleKoo의 답변과 유사하지만 테두리가 있습니다.
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 속성을 사용하여 VilleKoo의 답변 과 동일한 결과를 얻을 수 있습니다 outline
. 뛰어난 브라우저 지원을 제공합니다 (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;
}