css 引导模式是透明的

t1qtbnec  于 2023-05-30  发布在  其他
关注(0)|答案(2)|浏览(129)

我用了我所看到的教程,但它似乎有一个问题,对我的一部分,因为我读了其他文章在谷歌上,但没有人帮助我的问题。如何使我的模式对话框不透明?
看起来像http://i57.tinypic.com/20pr18w.png
这是我的密码

  1. <div class="container">
  2. <div class="row text-center">
  3. <h3>Picture</h3>
  4. <a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#basicModal">Upload a photo</a>
  5. </div>
  6. </div>
  7. <div class="modal-backdrop modal fade" id="basicModal" style="display: none;" data-backdrop="true">
  8. <div class="modal-dialog">
  9. <div class="modal-content">
  10. <div class="modal-header">
  11. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  12. <h4 class="modal-title" id="myModalLabel">Update Display Picture</h4>
  13. </div>
  14. <div class="modal-body col-xs-12">
  15. <div class="col-xs-4">
  16. <a href="#" class="btn btn-lg btn-success text-center" style=" margin-top:50%;width:150px; height:50px;"><i class="glyphicon glyphicon-plus"></i> Upload a photo</a>
  17. </div>
  18. <div class="col-xs-8">
  19. <h4 class="pull-right">PREVIEW</h4>
  20. <div class="center-block" style="background-image:url(img/default-picture.jpg);
  21. width: 200px;
  22. height: 200px;
  23. background-size: cover;
  24. display: block;
  25. border-radius: 100px;
  26. -webkit-border-radius: 100px;
  27. -moz-border-radius: 100px;">
  28. </div>
  29. </div>
  30. </div>
  31. <div class="modal-footer">
  32. <br>
  33. <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  34. <button type="button" class="btn btn-primary">Save changes</button>
  35. </div>
  36. </div>
  37. </div>
kqqjbcuj

kqqjbcuj1#

覆盖该模式的默认不透明度:

  1. .modal-backdrop,
  2. .modal-backdrop.fade.in{
  3. opacity: 1;
  4. filter: alpha(opacity=100);
  5. background: #fff;
  6. }

如果上面的不起作用,那么尝试使用!important关键字:

  1. .modal-backdrop,
  2. .modal-backdrop.fade.in{
  3. opacity: 1 !important;
  4. filter: alpha(opacity=100) !important;
  5. background: #fff;
  6. }
7nbnzgx9

7nbnzgx92#

我遇到过同样的问题,我补充说:style="background: #fff"<div class="modal-content">最后它看起来像.. <div class="modal-content" style="background: #fff">
而且它看起来像一个魅力的工作!干杯

相关问题