html - div : believe it to be due to the svg background 内的按钮不可点击

Question

我有两个按钮放置在几层 div 中。将按钮放在 div 外部可以使它们变得可点击，但在内部则不能。经过一些测试后，它似乎是阻止可点击按钮的“背景”div，可能是由于 svg 被用作按钮后面的背景？我曾尝试将 z index 与 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

我的猜测是您的背景上的 pointer-events: none 导致了问题。您可以尝试将 pointer-events: all 添加到类 btn-primary 吗？