Пожалуйста, используйте приведенный ниже код в блокноте и сохраните как html, чтобы увидеть вывод. Есть форма авторизации и анимированный фон. После добавления фона я не могу нажать на поле имени пользователя и не могу ничего написать в этом. Пробовал менять позицию в CSS. Но этого не происходит.
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> html,
body {
height: 100%;
margin: 0;
background: rgb(2, 0, 36);
background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(149, 199, 20, 1) 0%, rgba(0, 212, 255, 1) 96%);
}
.myForm {
background-color: rgba(0, 0, 0, 0.5) !important;
padding: 15px !important;
border-radius: 15px !important;
color: white;
position: fixed;
transform: translateX(-50%);
}
input {
position: fixed;
border-radius: 0 15px 15px 0 !important;
}
input:focus {
outline: none;
box-shadow: none !important;
border: 1px solid #ccc !important;
}
.br-15 {
border-radius: 15px 0 0 15px !important;
}
.submit_btn {
border-radius: 15px !important;
background-color: #95c714 !important;
border: 0 !important;
}
#particles-js {
width: 100%;
height: 100%;
background-size: cover;
background-position: 50% 50%;
position: fixed;
top: 0px;
z-index: 1;
}
</style> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <dvi class="container h-200"> <div class="d-flex justify-content-center"> <div class="card mt-5 col-md-4 animated bounceInDown myForm"> <div class="card-header"> <center> <h5>Admin Portal</h5> </center> </div> <form> <div class="card-body"> <div id="dynamic_container"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text br-15"><i class="fas fa-user"></i></span> </div> <input type="text" placeholder="Login ID" class="form-control"/> </div> <div class="input-group mt-3"> <div class="input-group-prepend"> <span class="input-group-text br-15"><i class="fas fa-key"></i></span> </div> <input type="password" placeholder="Login Password" class="form-control"/> </div> </div> </div> <div class="card-footer"><center> <button class="btn btn-success btn-lg submit_btn"> <i class="fas fa-arrow-alt-circle-right"></i> LOGIN</button></center> </div> </form> </div> </div> </dvi> <div id="particles-js"></div> <script type="text/javascript"> $.getScript("https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js", function() {
particlesJS('particles-js', {
"particles": {
"number": {
"value": 80, "density": {
"enable": true, "value_area": 800
}
}
, "color": {
"value": "#ffffff"
}
, "shape": {
"type": "circle", "stroke": {
"width": 0, "color": "#000000"
}
, "polygon": {
"nb_sides": 6
}
, "image": {
"width": 100, "height": 100
}
}
, "opacity": {
"value": 0.5, "random": false, "anim": {
"enable": false, "speed": 1, "opacity_min": 0.1, "sync": false
}
}
, "size": {
"value": 5, "random": true, "anim": {
"enable": false, "speed": 40, "size_min": 0.1, "sync": false
}
}
, "line_linked": {
"enable": true, "distance": 150, "color": "#ffffff", "opacity": 0.4, "width": 1
}
, "move": {
"enable": true, "speed": 6, "direction": "none", "random": false, "straight": false, "out_mode": "out", "attract": {
"enable": false, "rotateX": 600, "rotateY": 1200
}
}
}
, "interactivity": {
"detect_on": "canvas", "events": {
"onhover": {
"enable": true, "mode": "repulse"
}
, "onclick": {
"enable": true, "mode": "push"
}
, "resize": true
}
, "modes": {
"grab": {
"distance": 400, "line_linked": {
"opacity": 1
}
}
, "bubble": {
"distance": 400, "size": 40, "duration": 2, "opacity": 8, "speed": 3
}
, "repulse": {
"distance": 200
}
, "push": {
"particles_nb": 4
}
, "remove": {
"particles_nb": 2
}
}
}
, "retina_detect": true, "config_demo": {
"hide_card": false, "background_color": "#b61924", "background_image": "", "background_position": "50% 50%", "background_repeat": "no-repeat", "background_size": "cover"
}
}
);
}
);
</script>