html - 条纹边框像示例图像 css

Question

我想创建一个条纹边框。

我想使用 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;
}

但在响应方面，有时它并没有完全覆盖，因为我的条纹背景图像具有尺寸高度和宽度。

所以我想把它当作边框来使用。有什么办法吗？

Answer 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>