我想创建一个条纹边框。
我想使用 img
标签或 div
标签将图像包含在条纹边框顶部。
这就是它需要的样子:
现在我正在尝试将边框图像设置为 svg。
.feed-item:after {
background: #0055b9;
background: url(../images/studentslab_hover_stripe_bg.svg);
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 4vw 2.7vw 2vw 2vw;
width: 104%;
opacity: 0;
}
.feed-item:hover:after {
opacity: 1;
z-index: -1;
}
但在响应能力方面,有时它没有完全覆盖,因为我的条纹背景图像具有高度和宽度尺寸。
所以我想用它作为边框。有什么办法吗?
最佳答案
在伪元素上使用重复的线性渐变,然后将其绝对定位在父 div 后面。
将其移动到悬停
上。
div {
width:150px;
height: 200px;
margin:1em auto;
border:2px solid green;
position: relative;
background: white;
}
div:after {
content:"";
position: absolute;
z-index:-1;
top:0;
left:0;
height:100%;
width:100%;
background: repeating-linear-gradient(
-45deg,
transparent 0,
transparent 4px,
blue 4px,
blue 8px);
transition:all .25s ease;
}
div:hover::after {
left:8px;
top:8px;
}
<div>Hover me</div>
关于html - 条纹边框就像示例图像 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53893004/