Question

所以，因为即时通讯我不能向你们展示任何照片来展示我所拥有的问题，但是我会以最好的方式向你们解释它。

我有一个背景图片：url（），作为我的网站的“英雄”，我也有一个自举按钮，我用作“浏览你的电脑的文件”按钮，但由于某种原因只有当我把它放在外面时，按钮才能在我的英雄标签内点击。

HTML

<body>

    <div id="hero">
        <div id="hero-overlay">

            <nav class="navbar navbar-inverse">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="#">AppInvest</a>
                    </div>
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">Upload</a></li>
                        <li><a href="#">Analyze</a></li>
                        <li><a href="#">About</a></li>
                    </ul>
                </div>
            </nav>

            <label class="btn btn-primary" for="my-file-selector">
                <input id="my-file-selector" type="file" style="display:none;">
                Browse...
            </label>

            <div style="background:transparent !important" class="jumbotron text-center">
                <h1>
                    AppInvest
                </h1>

                <div class="container">
                    <div class="row">
                        <div class="col-sm-1 text-left">
                            <p>Who are we?</p>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>

</body>

CSS

body {
    margin: 0px;
}

#hero {
    background-image: url('../img/rarri.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    top: 0;
    bottom: 0;
    height: 100vh;
    z-index: -10;
}

#hero-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    z-index: -5;
    background-color: rgba(0,0,0,0.5);
}

另外，如果你能给我一些关于在屏幕中央制作一个带有“附加文件总数”上传按钮的最佳方法的提示，我将不胜感激。

显然它的CSS与HTML有关。

Answer 1

由于z-index的否定#hero，该按钮无法点击。 z-index在这个szenario中没有任何影响所以我删除它并且它有效：

https://jsfiddle.net/967h3ty2/

要附加＆＃34;附加的文件＆＃34;在屏幕的中心，您需要使用php或类似技术计算服务器端上传的文件。

Bootstrap文件上传按钮在background-image中不起作用

1 个答案: