所以我做了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;
}
最佳答案
实现此目的的更好方法是使用伪元素 :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;
来防止背景颜色给边框本身着色。
关于html - 如何将图像放在按钮后面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45260526/