只想问是否可以在我的模态中有一个背景图像?我试过搜索,但我只看到与模式有关的背景相关的东西,它指的是页面本身。我想要的是我的模式框有一个图像背景。或改变它的颜色?谢谢。我在CSS中并不擅长。谢谢。Bootstrap模态图像背景
0
A
回答
1
假设你想在你的情态动词的身体图像您可以使用
.modal-body {
background-image: url(path/to/image);
}
或者,如果你想要你的模式在你身后可以使用
.modal-backdrop {
background-image: url(path/to/image);
}
0
是,只要使用background-image: url(path/to/your/image);
$('#myModal').modal()
.modal-body {
background-image: url('http://myfunnymemes.com/wp-content/uploads/2015/04/Doge-Meme-Lion-In-All-Its-Majestic-Glory.jpg');
background-repeat: no-repeat;
background-size: cover;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
test
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
0
我假设你使用的是引导从
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
您将需要编辑您的
<div class="modal-content">
...
</div>
到:
<div class="modal-content modal-popout-bg">
CSS:
.modal .modal-popout-bg {
background: url("http://somepic.com/somepic.jpg");
}
相关问题
- 1. Twitter Bootstrap模态插入背景图像
- 2. Bootstrap模态背景问题
- 3. bootstrap模态体背景:无
- 4. Bootstrap模态启用背景
- 5. bootstrap中的背景图像?
- 6. 嵌套ui bootstrap模态,缺失背景
- 7. 如何激活Bootstrap模态背景?
- 8. Bootstrap模态不会退色背景
- 9. Bootstrap模态背景不会消失
- 10. Twitter bootstrap模态背景不会消失
- 11. Bootstrap背景图片
- 12. 动态背景图像jquery
- 13. 使背景图像静态?
- 14. WPF静态背景图像
- 15. 带CSS的Bootstrap背景图像
- 16. 使div背景图像响应bootstrap 3
- 17. 全尺寸背景图像col - * - *在Bootstrap
- 18. 使用bootstrap重复背景图像3
- 19. Twitter Bootstrap - 为什么我的模态像背景一样褪色?
- 20. firefox3背景图像模糊
- 21. Bootstrap v 3.1.1背景图覆盖模式
- 22. 在背景图像背景图像
- 23. 全景背景图像模糊
- 24. 未固定/动态div会模糊背后的背景图像
- 25. Twitter BootStrap背景图片
- 26. Responsive Bootstrap Jumbotron背景图片
- 27. Bootstrap Jumbotron背景图片
- 28. Bootstrap。页面背景图片
- 29. Bootstrap背景图片3
- 30. Bootstrap无尽背景图片
http://stackoverflow.com/questions/18310324/javascript-print-in-a-new-window-wont-display-images/39426586#39426586也许这个链接会帮助你。 – Elnaz