Question

所以我做了this mockup，我试图在我的按钮后面留下条纹。我尝试过使用border-image，background-image，在添加的div /按钮上使用线性渐变的边框但没有工作

https://jsfiddle.net/hoyhym/txsgcx5b/这是我最近的尝试，边框变成了一个厚黑色边框而不是图像，它显示在.header按钮但是太宽

<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

正如我在评论中所说的那样，有点摆弄你会得到：Fiddle

＆＃13;

.headerbutton {
  text-align: center;
  padding-bottom: 3rem;
  margin-top: 4rem;
 }

.button {
  font-size: .8rem;
  color: white;
  padding: .9rem .9rem .7rem;
  text-decoration: none;
  background: rgba(0,0,0,.95);
  border-image-source: url(http://i.imgur.com/dCwAQsB.png);
  border-image-repeat: repeat;
  border-image-width: 10px; /* thickness of the border */
  border-image-slice:  0 10 10 0; /* what slices are being used?*/
  border-image-outset: 0 10px 10px 0; /* how many pixels wide */
}

＆＃13;

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

＆＃13;

Answer 2

更好的方法是使用伪元素: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;以防止背景颜色为边框着色。

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

2 个答案:

jsFiddle