是否可以使用具有透明度的线性渐变，其中后面是图像？

是否有可能使用透明度线性渐变，其中后面会是图像？是否可以使用具有透明度的线性渐变，其中后面是图像？

这是我能做的事吗？

<svg style="background-image: url('http://via.placeholder.com/266x150');border: 3px solid #0059dd; background-repeat: no-repeat;padding: 36px 100px 36px 100px ; cursor: pointer;background: linear-gradient(to right,transparent 83px,#0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px);" 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>

来源

2017-10-09 svgcoding

在哪些方面做了解答您的[以前几乎相同的问题（https://stackoverflow.com/questions/46631081/placing-an-image-behind-a-border - 和 - 2垂直线）无法满足您的需求？ –

我可能会理解你想要的东西。 –

我想复制垂直SVG线的间距，因为它们显示在顶部图像中。我怎么做？ https://jsfiddle.net/8gj322p7/5/ – svgcoding

-2

的答案： https://jsfiddle.net/6v0b7ppj/1/

<svg style="border: 3px solid #0059dd; background-repeat: no-repeat;padding: 36px 100px 36px 100px ; cursor: pointer;background: 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/266x150');" 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>

来源

2017-10-09 06:26:06 svgcoding

然后你应该解释为什么（在答案中），此刻它是一个代码转储，对其他人来说并不真正有用。 –

的元件被允许具有多个背景。用逗号分隔它们。最后列出的那个将在后面。

svg { 
 
    padding: 39px 103px 39px 103px; 
 
    cursor: pointer; 
 
    border: 3px solid #0059dd; 
 
    background: 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/266x150'); 
 
}

<svg 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" /> 
 

 
</svg>

来源

2017-10-09 14:53:21

是否可以使用具有透明度的线性渐变，其中后面是图像？

回答

相关问题