Question

我想要做的是将图像放在边框和2条垂直线后面。我认为垂直线可能是SVG，但我不知道如何设置它。

<svg style="background-image: linear-gradient( to right,#000000 83px,#0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, #000000 177px );border: 3px solid #0059dd;padding: 62px 100px 62px 100px;  cursor: pointer;background-color:black;"
  width="60" height="72" viewBox="0 0 60 72">
    <path d="M30.001,12C16.767,12,6,22.765,6,35.999s10.766,23.999,24,23.999s24-10.765,24-23.999S43.235,12,30.001,12L30.001,12z" fill="#000000"></path>
    <path d="M39.201,34.34l-12-9c-0.607-0.455-1.419-0.528-2.095-0.189c-0.677,0.339-1.106,1.031-1.106,1.789v18c0,0.758,0.428,1.45,1.106,1.789c0.283,0.142,0.589,0.211,0.894,0.211c0.425,0,0.847-0.136,1.2-0.4l12-9c0.503-0.377,0.8-0.97,0.8-1.6C40.001,35.31,39.705,34.717,39.201,34.34z"
    fill="#E6DC00"></path>
    <path fill="#E6DC00 " d="M30,15c11.598,0,21,9.402,21,20.999s-9.401,20.999-21,20.999c-11.599,0-21-9.402-21-20.999S18.401,15,30,15 M30,9C15.112,9,3,21.111,3,35.999s12.112,26.999,27,26.999c14.888,0,27-12.111,27-26.999S44.888,9,30,9L30,9z" /></path>
  </svg>

Answer 1

框内的蓝线不是SVG路径，它们是线性渐变的一部分，因为你有它在那里我假设你知道背景图像是如何工作的。

可以有两种方法，一种是从您的SVG linear-gradient中删除background-image部分，而是使用url('URL-TO-IMAGE')，并使用SVG的<path>。我不是SVG的专家，所以无法告诉你如何做到这一点。

我建议的第二种方法是使用multiple backgrounds，是的，CSS允许使用背景图像/渐变/颜色层，这很简单。

background-image: url("image-1.png"), url("image-2.png");

或

background-image: linear-gradient(....), url("image-2.png");

目前您的SVG的background-image媒体资源是

background-image: linear-gradient( to right,#000000 83px,#0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, #000000 177px );

要在当前图像后面添加另一个图像/线性渐变，您只需使用逗号分隔部分，就像这样

background-image: linear-gradient( to right,#000000 83px,#0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, #000000 177px ), url('http://via.placeholder.com/200x200');

但即使你这样做，你也不会在框中的http://via.placeholder.com/200x200看到图像，这是因为你的线性渐变中有完全不透明的颜色，好吧，让我们改变一切线性渐变的值为#000000

的transparent

background-image: linear-gradient( to right,transparent 83px,#0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px ), url('http://via.placeholder.com/200x200');

这是一个有效的演示：

<svg style="background-image: linear-gradient( to right,transparent 83px,#0059dd 83px, #0059dd 86px, transparent 86px,transparent  174px, #0059dd 174px, #0059dd 177px, transparent 177px ), url('http://via.placeholder.com/200x200');border: 3px solid #0059dd;padding: 62px 100px 62px 100px;  cursor: pointer;background-color:black; background-position: center;"
  width="60" height="72" viewBox="0 0 60 72">
    <path d="M30.001,12C16.767,12,6,22.765,6,35.999s10.766,23.999,24,23.999s24-10.765,24-23.999S43.235,12,30.001,12L30.001,12z" fill="#000000"></path>
    <path d="M39.201,34.34l-12-9c-0.607-0.455-1.419-0.528-2.095-0.189c-0.677,0.339-1.106,1.031-1.106,1.789v18c0,0.758,0.428,1.45,1.106,1.789c0.283,0.142,0.589,0.211,0.894,0.211c0.425,0,0.847-0.136,1.2-0.4l12-9c0.503-0.377,0.8-0.97,0.8-1.6C40.001,35.31,39.705,34.717,39.201,34.34z"
    fill="#E6DC00"></path>
    <path fill="#E6DC00 " d="M30,15c11.598,0,21,9.402,21,20.999s-9.401,20.999-21,20.999c-11.599,0-21-9.402-21-20.999S18.401,15,30,15 M30,9C15.112,9,3,21.111,3,35.999s12.112,26.999,27,26.999c14.888,0,27-12.111,27-26.999S44.888,9,30,9L30,9z" /></path>
  </svg>

请研究代码并进行实验，这是了解更多内容的最佳方式！

Answer 2

喜欢这个吗？

＆＃13;

svg {
  border:3px solid #0059dd;
  padding:62px 100px 62px 100px;
  cursor:pointer;
  background-color:black
}

＆＃13;

  <svg width="60" height="72">
     <path fill="#E6DC00"d="M39.201,34.34l-12-9 c-0.607-0.455-1.419-0.528-2.095-0.189 c-0.677,0.339-1.106,1.031-1.106,1.789 v18 c0,0.758,0.428,1.45,1.106,1.789 c0.283,0.142,0.589,0.211,0.894,0.211 c0.425,0,0.847-0.136,1.2-0.4 l12-9 c0.503-0.377,0.8-0.97,0.8-1.6 C40.001,35.31,39.705,34.717,39.201,34.34 z"/>
     <path fill="#E6DC00 "d="M30,15 c11.598,0,21,9.402,21,20.999 s-9.401,20.999-21,20.999 c-11.599,0-21-9.402-21-20.999 S18.401,15,30,15  M30,9 C15.112,9,3,21.111,3,35.999 s12.112,26.999,27,26.999 c14.888,0,27-12.111,27-26.999 S44.888,9,30,9 L30,9 z"/>
     <path stroke="#0059dd" stroke-width="3" d="M 10,-62 v 196 M 50,-62 v 196"/>
  </svg>

＆＃13;

JSFiddle

Answer 3

我看到这个，它有2条垂直线

和一个片段：

＆＃13;

svg {
  border:3px solid #0059dd;
  padding:62px 100px 62px 100px;
  cursor:pointer;
  background-color:#aaaaaa
}

＆＃13;

<svg width="60" height="72">
   <path fill="#000000" d="M30.001,12 C16.767,12,6,22.765,6,35.999 s10.766,23.999,24,23.999 s24-10.765,24-23.999 S43.235,12,30.001,12 L30.001,12 z"/>
   <path fill="#E6DC00"d="M39.201,34.34l-12-9 c-0.607-0.455-1.419-0.528-2.095-0.189 c-0.677,0.339-1.106,1.031-1.106,1.789 v18 c0,0.758,0.428,1.45,1.106,1.789 c0.283,0.142,0.589,0.211,0.894,0.211 c0.425,0,0.847-0.136,1.2-0.4 l12-9 c0.503-0.377,0.8-0.97,0.8-1.6 C40.001,35.31,39.705,34.717,39.201,34.34 z"/>
   <path fill="#E6DC00 "d="M30,15 c11.598,0,21,9.402,21,20.999 s-9.401,20.999-21,20.999 c-11.599,0-21-9.402-21-20.999 S18.401,15,30,15  M30,9 C15.112,9,3,21.111,3,35.999 s12.112,26.999,27,26.999 c14.888,0,27-12.111,27-26.999 S44.888,9,30,9 L30,9 z"/>
   <path stroke="#0059dd" stroke-width="3" d="M -17,-62 v 196 M 77,-62 v 196"/>
</svg>

＆＃13;

将图像放置在边框和2条垂直线后面

3 个答案: