html - 如何将图像放在按钮后面？

Question

所以我制作了this mockup我正试图让我的纽扣后面有条纹。我试过在添加的 div/按钮上使用边框图像、背景图像、带线性渐变的边框，但都没有用

https://jsfiddle.net/hoyhym/txsgcx5b/这是我最近的尝试，边框变成了粗黑边框而不是图像，它确实显示在 .headerbutton 中但太宽了

<div class="headerbutton">
   <a href="#" class="button">Ontdek ons programma</a>
</div>

.headerbutton {
  text-align: center;
  padding-bottom: 3rem;
  margin-top: 4rem;
  //border: 10px solid black;
  //border-image: url(http://i.imgur.com/dCwAQsB.png) 30 repeat;
}

.button {
  font-size: .8rem;
  color: white;
  background-color: black;
  padding: .9rem .9rem .7rem;
  text-decoration: none;
  border: 10px solid black;
  border-image: url(http://i.imgur.com/dCwAQsB.png) 30 repeat;
}

Answer 1

实现此目的的更好方法是使用伪元素 :after。

jsFiddle

.button:after{
   content:"";
   position:absolute;
   width:100%;
   height:100%;
   top:5px;
   left:5px;
   background: url(http://i.imgur.com/dCwAQsB.png) repeat;
   z-index:-1;
 }

但是如果你坚持使用边框，你需要 background-clip:padding-box; 来防止背景颜色给边框本身着色。