0

Подскажите какие сss надо использовать для затемнение при запуске окна формы Вот таквведите сюда описание изображения

Сама форма вот

.modal-window_top{
	font-family: OpenSans-Bold;
	font-size:18px;
	width: 502px;
	height: 56px;
	color:#000;
	background-color: #f2f2f2;
	text-align: center;
}
.close{
	margin-top: -40px;
	margin-right: 17px;
}
.modal-window_bot{
width: 404px;
height: 200px;
border: 1px solid #dddddd;
background-color: #f2f2f2;
margin-left: 49px;
margin-top:32px; 
}
.form-control.forma_reg{
margin-top:15px; 
width: 364px;
height: 41px;
border: 1px solid #dddddd;
background-color: #ffffff;
}
.btn.btn_reg{
width: 364px;
height: 41px;
background-color: #333333;
color: #fff;
margin-left: 15px;
border-radius: 0;
}
.btn.btn_reg:hover{
	color: #fff;
}
.help-block.reg_txt{
	font-size:12px ;
	font-family:OpenSans-Regular;
	color:#000;
	float: right;
	clear: right;
	margin-right: 50px;

}
.help-block.reg_txt a{
	font-size:12px ;
	color:#999;
	font-family:OpenSans-Regular;
	text-decoration: underline;

}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
</head>
<body>
<div class="container">
 	<div class="row">
 		<div class="col-md-6 col-md-offset-3">
 			<div class="" style="position: relative;width: 502px;height:350px;background-color:#fff; ">
 			<div class="modal-window_top">
 				<p style="padding-top:12px; ">ВХОД</p><img src="img/close.png" class="close">
 			</div>
 				<div class="modal-window_bot">
 					<form role="form">
 						<div class="form-group">
 							<div class="col-sm-8">
 							<input  type="email" class="form-control forma_reg" placeholder="E-mail">
 						</div>
 						</div>
 							<div class="col-sm-8">
 							<div class="form-group">
 							<input type="password" class="form-control forma_reg" placeholder="Пароль">
 							</div>
 							</div>
 							
					<button class="btn btn_reg">ВОЙТИ</button>
 					</form></div>
 					<p class="help-block reg_txt">У вас ещё нет учетной записи?</p>
 							<p class="help-block reg_txt" style="margin-top: -12px;color:#999;"><a href="#">Создать аккаунт</a>/<a href="#">Забыли пароль?</a></p>
 			
 		</div><!--col-md-6-->
 	</div><!--row-->
 </div><!--conta-->
 <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 </body>
</html> 

1
  • background-color: rgba(0,0,0,0.5);
    – Slavik
    16 авг 2017 в 9:08

1 ответ 1

3

Тут есть несколько способов реализации:

  1. Сделать подложку во весь экран и поставить ее фоном за слоем с формой. Добавить для этого блока:

background-color: rgba(0,0,0,0.5);

  1. Для формы добавить значение

box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.5);

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.