如何使背景在启动时变暗

问题描述：

如何使背景变暗并使用自举？我发现这个代码，但不知道我可以在哪里调整背景或我必须添加到我的风格什么样的CSS代码。如何使背景在启动时变暗

发现这里的代码： https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 

<div class="container"> 
    <h2>Modal Example</h2> 
    <!-- Trigger the modal with a button --> 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 

    <!-- Modal --> 
    <div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
      <p>Some text in the modal.</p> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 

    </div> 
    </div> 

</div> 

</body> 
</html>

答

正在控制背景颜色的CSS是文件modals.less内，由下面的代码

.modal-backdrop { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 1040; 
    background-color: #333; 
}

控制要使背景较暗只是在自己的样式表中覆盖类.modal-backdrop并添加不同的背景颜色。

在相同的较少文件中有一个类叫做.modal-backdrop .in这个类控制背景的不透明度。

.modal-backdrop.in { 
    filter: alpha(opacity=50); 
    opacity: .5; 
}

如果不透明度不符合您的要求，也可以覆盖此项。

谢谢，我真的从来没有找到这个解决方案 – Marcus

不客气。如果这对您有用，请将我的答案标记为正确的答案。 –

如何使背景在启动时变暗

相关推荐