显示在图像边界

时间:2017-09-07 09:15:31

标签: html css background background-image border

我有以下标记:

<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的图片边框: enter image description here

看到#carousel-is-sl-for-me是父元素,我会认为它的图像边框会在顶部吗?这是他们应该看的样子(如果我隐藏图像背景): enter image description here

有没有一种简单的方法来解决这个问题?

0 个答案:

没有答案