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

时间:2017-07-23 00:30:53

标签: html css

所以我做了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;
}

2 个答案:

答案 0 :(得分:1)

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

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分: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;以防止背景颜色为边框着色。