div中不可点击的按钮：相信是由于svg背景

Question

我在div的几层中放置了两个按钮。 将按钮放在div外部可以使它们变为可单击状态，但在内部则不能单击。 经过一些测试之后，似乎是“ background” div阻止了可点击按钮，可能是由于svg被用作按钮后面的背景？ 我尝试使用z索引与position：absolute没有运气。 同时使按钮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类吗？