条纹边框像样本图像css [英] Stripes Border like sample image css

问题描述

我要创建一个条纹边框.

I want to create a striped border.

我想使用img标记或div标记将图像包括在条纹边框的顶部.

I want to use the img tag or div tag to include the image on top of the Striped Border.

它的外观如下:

现在我正在尝试将边框图像作为svg.

Now I am trying like this with border image as 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;
}

但是在响应速度方面，由于我的条纹背景图像具有尺寸的高度和宽度，因此有时并不能完全覆盖.

But in responsiveness, it's not covering full sometimes because my striped background image has dimension height and width.

所以我想像边框一样使用它.有什么办法吗?

So I want to use it like a border. Is there any way?

推荐答案

您可以考虑以下乘法背景颜色:

You can consider a multipe background coloration like below:

.box {
  width: 100px;
  height: 200px;
  border-right:  10px solid transparent;
  border-bottom: 10px solid transparent;
  background: 
   linear-gradient(#fff,#fff) center/calc(100% - 2px) calc(100% - 2px) padding-box,
   linear-gradient(blue,blue) padding-box,
   linear-gradient(#fff,#fff) top right  /10px 10px border-box,
   linear-gradient(#fff,#fff) bottom left/10px 10px border-box,
   /* you can replace this gradient with your SVG*/
   repeating-linear-gradient( -45deg, 
     transparent 0, transparent 2px, 
     blue 2px, blue 4px) border-box;
   /**/
  background-repeat:no-repeat;
  display:inline-block;
}

<div class="box"></div>
<div class="box" style="width:200px;"></div>
<div class="box" style="width:200px;height:100px"></div>

这篇关于条纹边框像样本图像css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！