div 内不可点击的按钮:相信这是由于 svg 背景造成的

Question

我有两个按钮放在几层div中。 将按钮放在div 外部可以使它们变得可点击，但在内部则不然。经过一些测试，似乎是"背景"div阻止了可点击的按钮，可能是由于svg被用作按钮后面的背景？我尝试使用带有位置：绝对的 z 索引，但没有运气。还使按钮visibility:visible

.background {
background-image: url(images/background.svg);
background-size: cover;
width: 100%;
height: 100vh;
position: relative;
top:-76px;
z-index: -1;
}
.left-header {
position: relative;
top: 40vh;

}
.btn-primary {
margin-top: 30px;
text-transform: uppercase; 
font-family: Roboto;
font-weight: 500;
font-size: 15px;
margin-right: 20px;
transition: all 0.3s ease 0s;
outline: none;    
border-radius: 4px;
display: inline-block;
letter-spacing: .025em;
line-height: 25px;
cursor: pointer !important;

}

<div class="background">
<div class="container left-header">
<div class="row">
<div class="col">
<h1>hello.</h1>
<h2>some text</h2>
<button type="button" href="#!" class="btn btn-primary shadow"  id="but1">Create Account</button>
<button type="button" class="btn btn-primary shadow" id="but2">Contact Us</button>                  
</div>
<div class="col">
<div class="illustration"><img src="images/illustration.svg"></div>        
</div>
</div>              
</div>      
</div>

.

Answer 1

我的猜测是指针事件：你的背景上没有一个导致问题。你能尝试添加指针事件：全部添加到类btn-primary吗？