Serait-il possible d'utiliser linéaire-gradient avec transparence, où derrière ce serait une image?

Serait-il possible d'utiliser linéaire-gradient avec transparence, où derrière ce serait une image?Serait-il possible d'utiliser linéaire-gradient avec transparence, où derrière ce serait une image?

Est-ce quelque chose que je serais capable de faire?

https://jsfiddle.net/w73d3o36/

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

Source

2017-10-09 svgcoding

De quelle manière les réponses à votre [question précédente presque identique] (https://stackoverflow.com/questions/46631081/placing-an-image-behind-a-border -et-2-vertical-lines) ne répond pas à vos besoins? –

Je pourrais si je pouvais comprendre ce que vous vouliez. –

Je voulais reproduire l'espacement des lignes verticales SVG telles qu'elles sont montrées dans l'image du haut. Comment je fais ça? https://jsfiddle.net/8gj322p7/5/ – svgcoding

-2

La réponse: 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>

Source

2017-10-09 06:26:06 svgcoding

Ensuite, vous devriez expliquer pourquoi (dans la réponse), pour le moment c'est un vidage de code qui n'est pas vraiment utile à quelqu'un d'autre. –

Un élément est autorisé à avoir plusieurs origines. Juste les séparer avec une virgule. Celui listé en dernier sera à l'arrière.

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>

Source

2017-10-09 14:53:21

Serait-il possible d'utiliser linéaire-gradient avec transparence, où derrière ce serait une image?

Répondre

Questions connexes