Так что, поскольку я новый, я не могу показать вам, что у вас есть фотографии, чтобы продемонстрировать проблемы, которые у них есть, но старайтесь объяснить это вам наилучшим образом.Кнопка загрузки загрузки Bootstrap не работает в background-image
У меня есть фоновое изображение: 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 связаны.
предоставьте свой код –
Извините, что так долго, мне нужно было выяснить, как его опубликовать, но вот оно. –