Question

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

这是我能做的吗？

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

Answer 1

允许元素具有多个背景。只需用逗号分隔它们即可。最后列出的那个将在后面。

＆＃13;

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');
}

＆＃13;

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

＆＃13;

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

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

2 个答案: