如何使背景在啓動時變暗

-1

如何使背景變暗並使用自舉？我發現這個代碼，但不知道我可以在哪裏調整背景或我必須添加到我的風格什麼樣的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>

來源

2017-10-12 Marcus

正在控制背景顏色的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; 
}

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

來源

2017-10-12 22:00:46

謝謝，我真的從來沒有找到這個解決方案 – Marcus

不客氣。如果這對您有用，請將我的答案標記爲正確的答案。 –

如何使背景在啓動時變暗

回答

相關問題