我必须在模态标题中添加背景图像,它也应该是响应式的。我能够添加图像,但我在使其响应时遇到问题。任何帮助表示赞赏。
以下是示例代码段。
.modal-header {
border-bottom: none;
padding: 15px 15px 0 15px;
background-image: url(https://s9.postimg.org/ky3v3mduz/Jellyfish.jpg);
height: 208px;
background-size: contain;
background-repeat: no-repeat;
.close {
background: none;
border: none;
float: right;
font-size: 40px;
line-height: 20px;
padding: 0;
&:hover {
color: @hover-blush;
}
}
}
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="container">
<h2</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn" 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">×</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>
&#13;
答案 0 :(得分:2)
假设您希望图像的中心是始终显示的部分,请使用background-size: cover; background-position: center center;
的组合。否则,根据需要进行调整,以确保显示图像的焦点。
.modal-header {
border-bottom: none;
padding: 15px 15px 0 15px;
background-image: url(https://s9.postimg.org/ky3v3mduz/Jellyfish.jpg);
height: 208px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
.close {
background: none;
border: none;
float: right;
font-size: 40px;
line-height: 20px;
padding: 0;
&:hover {
color: @hover-blush;
}
}
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="container">
<h2</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn" 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">×</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>
答案 1 :(得分:1)
要获得响应式背景图片,您要查找的是基于百分比的background-size
。要完全覆盖内容区域,请使用:
.modal-header {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.modal-header {
border-bottom: none;
padding: 15px 15px 0 15px;
background-image: url(https://s9.postimg.org/ky3v3mduz/Jellyfish.jpg);
height: 208px;
background-size: 100% 100%;
background-repeat: no-repeat;
.close {
background: none;
border: none;
float: right;
font-size: 40px;
line-height: 20px;
padding: 0;
&:hover {
color: @hover-blush;
}
}
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="container">
<h2</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn" 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">×</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>
请注意,这会扭曲图像,这可能不是您想要的。为了不扭曲图像,您应该只在background-size
中指定一个参数,并告诉背景固定到中心:
.modal-header {
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
.modal-header {
border-bottom: none;
padding: 15px 15px 0 15px;
background-image: url(https://s9.postimg.org/ky3v3mduz/Jellyfish.jpg);
height: 208px;
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
.close {
background: none;
border: none;
float: right;
font-size: 40px;
line-height: 20px;
padding: 0;
&:hover {
color: @hover-blush;
}
}
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="container">
<h2</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn" 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">×</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>
最终,考虑到模态标题本身永远不会改变高度,您可能只想使用<img>
标记而不是background-image
。
希望这有帮助! :)
答案 2 :(得分:0)
我认为您需要拥有的是尺寸合适的图片并更改背景尺寸。
// Try This
.jumbotron {
background: url("IMAGE PATH") rebeccapurple repeat center center;
color: white;
width: auto;
height: 350px;
margin-bottom: 100px;
position: relative;
display: block;
font-family: FontAwesome;
}
.modal-header {
border-bottom: none;
padding: 15px 15px 0 15px;
background-image: url(http://www.bahai.org/chrome/img/beliefs/bahaullah-covenant-feature-img.jpg?3e7a0319);
height: 208px;
background-size: cover;
background-repeat: no-repeat;
.close {
background: none;
border: none;
float: right;
font-size: 40px;
line-height: 20px;
padding: 0;
&:hover {
color: @hover-blush;
}
}
}
}