在图像上和SVG之前放置渐变

Question

我想做的就是让它看起来像这样。

但它看起来像这样。

如何修复它，看起来好像我想看它？

非常感谢所有帮助。

我在想这样的事情，但我无法让它发挥作用。

  #grad {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    height: 194px;
    background-color: transparent;
    background-image: linear-gradient( to right, transparent 0, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px);
  }

 <div id="grad"></div>

基本上就是这样，它一直要求我提供更多信息。基本上就是它，它一直要求我提供更多信息。那基本上就是它，它一直在问我提供更多信息。基本上就是这样，它一直要求我提供更多信息。基本上就是这样，它一直要求我提供更多信息。

＆＃13;

＆＃13;

<style>
  #playButton5 {
    position: relative;
    width: 266px;
    height: 250px;
    cursor: pointer;
    background-color: #000000;
    background-image: linear-gradient( to right, transparent 0, transparent 86px, #0059dd 86px, #0059dd 89px, transparent 89px, transparent 177px, #0059dd 177px, #0059dd 180px, transparent 180px, transparent 266px);
    box-Shadow: inset 0 0 0 3px #0059dd;
    background-repeat: no-repeat;
  }

.initial {
    background-color: transparent;
 }

.initial line {
    stroke-width: 6;
    stroke: #f00; 
 }

.initial circle {
    stroke-width: 6;
    stroke: #f00; 
    fill: black;
 } 

  .button2 div {
    width: 44px;
    height: 44px;
    top: 102px;
    left: 116px;
    background-color: transparent;
    background-size: 14px 18px;
    background-repeat: no-repeat;
    border-radius: 50%;
    position: absolute;
  }

</style>

<div id="playButton5" onclick=" 
var button = document.getElementById('playButton5');
var player = document.getElementById('player5');
player.volume=1.0; if (player.paused) {
document.querySelector('#playButton5 .pause').style.display='inline-block';
document.querySelector('#playButton5 .play').style.display='none';
player.play();
} else {
document.querySelector('#playButton5 .pause').style.display='none';
document.querySelector('#playButton5 .play').style.display='inline-block';
player.pause();
}">

  <svg class="initial" width="266" height="250" viewbox="0 0 266 150">
<image x="0" y="-50" width="266" height="250" xlink:href="https://i.imgur.com/sVt3ks7.png" />
    <line x1="6" y1="75" x2="32" y2="75" ></line>
    <line x1="39" y1="75" x2="111" y2="75" ></line>
    <line x1="86" y1="44" x2="192" y2="105" ></line>
    <line x1="137" y1="12" x2="137" y2="136" ></line>
    <line x1="86" y1="105" x2="192" y2="44" ></line>
    <line x1="152" y1="51" x2="188" y2="-12" ></line>
    <line x1="191" y1="-17" x2="205" y2="-40" ></line>
    <line x1="151" y1="98" x2="188" y2="161" ></line>
    <line x1="191" y1="166" x2="205" y2="188" ></line>
    <circle cx="138" cy="74" r="24.5"></circle>
  </svg>

  <div class="button2">
    <div class="play" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDEyMjYgMTQ4MSI+CjxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz48L3N2Zz4='); background-position: 58% 50%;background-size: 16px 20px;">
    </div>
    <div class="pause" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDEyNjAgMTUxMiI+CjxwYXRoIGQ9Ik0yNTIgMEgxMjZDOTEuMyAwIDYxLjcgMTIuMyAzNyAzNyAxMi4zIDYxLjcgMCA5MS4zIDAgMTI2djEyNjBjMCAzNC43IDEyLjMgNjQuMyAzNyA4OSAyNC43IDI0LjcgNTQuMyAzNyA4OSAzN2gxMjZjMzQuNyAwIDY0LjMtMTIuMyA4OS0zNyAyNC43LTI0LjcgMzctNTQuMyAzNy04OVYxMjZjMC0zNC43LTEyLjMtNjQuMy0zNy04OS0yNC43LTI0LjctNTQuMy0zNy04OS0zN3ptODgyIDBoLTEyNmMtMzQuNyAwLTY0LjMgMTIuMy04OSAzNy0yNC43IDI0LjctMzcgNTQuMy0zNyA4OXYxMjYwYzAgMzQuNyAxMi4zIDY0LjMgMzcgODkgMjQuNyAyNC43IDU0LjMgMzcgODkgMzdoMTI2YzM0LjcgMCA2NC4zLTEyLjMgODktMzcgMjQuNy0yNC43IDM3LTU0LjMgMzctODlWMTI2YzAtMzQuNy0xMi4zLTY0LjMtMzctODktMjQuNy0yNC43LTU0LjMtMzctODktMzd6IiBmaWxsPSIjMDA1OWRkIi8+PC9zdmc+');background-position: 50%;background-size: 16px 20px;display: none;">
    </div>
  </div>
</div>

<audio id="player5" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>

＆＃13;

＆＃13;

＆＃13;

Answer 1

它们是3个独立的物体还是红色和银色的组合？

如果它们是3个单独的对象，请尝试使用z-index

渐变z指数-1 图像z指数-2

Answer 2

您必须创建新的svg元素才能在图像标记之后添加两个新行 Click Here

<line style="stroke:#0059dd;stroke-width:3px;dysplay:block;" y2="200" x1="88"  x2="88"  y1="-60"></line>
<line style="stroke:#0059dd;stroke-width:3px;dysplay:block;" y2="200" x1="180" x2="180" y1="-60"></line>

＆＃13;

＆＃13;

#playButton5 {
    position: relative;
    width: 266px;
    height: 250px;
    cursor: pointer;
    background-color: #000000;
   /* background-image: linear-gradient( to right, transparent 0, transparent 86px, #0059dd 86px, #0059dd 89px, transparent 89px, transparent 177px, #0059dd 177px, #0059dd 180px, transparent 180px, transparent 266px);*/
    box-Shadow: inset 0 0 0 3px #0059dd;
    background-repeat: no-repeat;
  }

.initial {
    background-color: transparent;
 }

.initial line {
    stroke-width: 6;
    stroke: #f00; 
 }

.initial circle {
    stroke-width: 6;
    stroke: #f00; 
    fill: black;
 } 

  .button2 div {
    width: 44px;
    height: 44px;
    top: 102px;
    left: 116px;
    background-color: transparent;
    background-size: 14px 18px;
    background-repeat: no-repeat;
    border-radius: 50%;
    position: absolute;
  }

＆＃13;

<div id="playButton5" onclick=" 
var button = document.getElementById('playButton5');
var player = document.getElementById('player5');
player.volume=1.0; if (player.paused) {
document.querySelector('#playButton5 .pause').style.display='inline-block';
document.querySelector('#playButton5 .play').style.display='none';
player.play();
} else {
document.querySelector('#playButton5 .pause').style.display='none';
document.querySelector('#playButton5 .play').style.display='inline-block';
player.pause();
}">

  <svg class="initial" width="266" height="250" viewbox="0 0 266 150">
<image x="0" y="-50" width="266" height="250" xlink:href="https://i.imgur.com/sVt3ks7.png" />
    <line style="stroke:#0059dd;stroke-width:3px;dysplay:block;" y2="200" x1="88" x2="88" y1="-60"></line>
    <line  style="stroke:#0059dd;stroke-width:3px;dysplay:block;" y2="200" x1="180" x2="180" y1="-60"></line>
    <line x1="6" y1="75" x2="32" y2="75" ></line>
    <line x1="39" y1="75" x2="111" y2="75" ></line>
    <line x1="86" y1="44" x2="192" y2="105" ></line>
    <line x1="137" y1="12" x2="137" y2="136" ></line>
    <line x1="86" y1="105" x2="192" y2="44" ></line>
    <line x1="152" y1="51" x2="188" y2="-12" ></line>
    <line x1="191" y1="-17" x2="205" y2="-40" ></line>
    <line x1="151" y1="98" x2="188" y2="161" ></line>
    <line x1="191" y1="166" x2="205" y2="188" ></line>
    <circle cx="138" cy="74" r="24.5"></circle>
  </svg>

  <div class="button2">
    <div class="play" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDEyMjYgMTQ4MSI+CjxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz48L3N2Zz4='); background-position: 58% 50%;background-size: 16px 20px;">
    </div>
    <div class="pause" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDEyNjAgMTUxMiI+CjxwYXRoIGQ9Ik0yNTIgMEgxMjZDOTEuMyAwIDYxLjcgMTIuMyAzNyAzNyAxMi4zIDYxLjcgMCA5MS4zIDAgMTI2djEyNjBjMCAzNC43IDEyLjMgNjQuMyAzNyA4OSAyNC43IDI0LjcgNTQuMyAzNyA4OSAzN2gxMjZjMzQuNyAwIDY0LjMtMTIuMyA4OS0zNyAyNC43LTI0LjcgMzctNTQuMyAzNy04OVYxMjZjMC0zNC43LTEyLjMtNjQuMy0zNy04OS0yNC43LTI0LjctNTQuMy0zNy04OS0zN3ptODgyIDBoLTEyNmMtMzQuNyAwLTY0LjMgMTIuMy04OSAzNy0yNC43IDI0LjctMzcgNTQuMy0zNyA4OXYxMjYwYzAgMzQuNyAxMi4zIDY0LjMgMzcgODkgMjQuNyAyNC43IDU0LjMgMzcgODkgMzdoMTI2YzM0LjcgMCA2NC4zLTEyLjMgODktMzcgMjQuNy0yNC43IDM3LTU0LjMgMzctODlWMTI2YzAtMzQuNy0xMi4zLTY0LjMtMzctODktMjQuNy0yNC43LTU0LjMtMzctODktMzd6IiBmaWxsPSIjMDA1OWRkIi8+PC9zdmc+');background-position: 50%;background-size: 16px 20px;display: none;">
    </div>
  </div>
</div>

<audio id="player5" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>

＆＃13;

＆＃13;

＆＃13;