我有以下标记:
<div id="carousel-is-sl-for-me" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-is-sl-for-me" data-slide-to="0" class="active">
<li data-target="#carousel-is-sl-for-me" data-slide-to="1">
<li data-target="#carousel-is-sl-for-me" data-slide-to="2">
<li data-target="#carousel-is-sl-for-me" data-slide-to="3">
<li data-target="#carousel-is-sl-for-me" data-slide-to="4">
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" style="background-image: url('<?php bloginfo('template_url'); ?>/image/carousel-placeholder-01.jpg');">
<div class="container">
<div class="row">
<div class="col-md-5 col-md-offset-1">
<div class="panel panel-info">
<div class="panel-heading">1 in 4 people</div>
<div class="panel-body">
<p>...text goes here</p>
<a href="#" class="btn btn-primary">
<span class="glyphicon glyphicon-file"></span>
Download PDF
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-is-sl-for-me" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-is-sl-for-me" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
请注意.item
如何将背景应用于内联样式。
然后,在我的CSS中,我有以下CSS边框:
#carousel-is-sl-for-me {
border-image-slice: 15 27 15 27;
border-image-width: 15px 15px 15px 15px;
border-image-repeat: repeat repeat;
border-image-source: url('../image/marker-border-image-white-big-reversed.png');
border-style: solid;
}
但是,.item
的图片背景隐藏了#carousel-is-sl-for-me
的图片边框:
看到#carousel-is-sl-for-me
是父元素,我会认为它的图像边框会在顶部吗?这是他们应该看的样子(如果我隐藏图像背景):
有没有一种简单的方法来解决这个问题?