Question

我试图在具有透明背景颜色的div和非背景颜色之间叠加边框图像，因此它在容器之间并且看起来更加明显。我得到它的工作，但由于某种原因，它把放在背后背景使图像比现在/可见更透明。这就是我所拥有的：

＆＃13;

.colWrap {
    float: left;
    margin: 10px 6px;
    border-width: 7px;
       -moz-border-image: url('http://i.stack.imgur.com/CJjI9.png') 6 round;
    -webkit-border-image: url('http://i.stack.imgur.com/CJjI9.png') 6px round;
         -o-border-image: url('http://i.stack.imgur.com/CJjI9.png') 6 round;
            border-image: url('http://i.stack.imgur.com/CJjI9.png') 6 round;
}

.colWrap .col {
    margin: -4px;
    padding: 25px;
    background-color: rgba( 254, 250, 100, 0.65 );
    width: 275px;
    height: 315px;
}

＆＃13;

<div class="colWrap">  
  <div class="col">
  </div>
</div>

<div class="colWrap">  
  <div class="col">
  </div>
</div>

＆＃13;

我尝试使用.colWrap容器相对和.col绝对z-indices，但它没有任何区别，它总是落后于半透明背景。有什么方法可以解决这个问题，还是总是这样？

Answer 1

将此添加到.col

z-index: -1;
position: relative;

叠加边框图像

1 个答案: