按钮在 div 内不可点击：相信这是由于 svg 背景

Question

我有两个按钮放在 div 的几层中。将按钮放在 div 之外可以让它们变得可点击，但在里面则不能。经过一些测试后，似乎是 'background' 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

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

按钮在 div 内不可点击：相信这是由于 svg 背景

Buttons not clickable inside div: believe it to be due to the svg background

html

css

svg

button

clickable