【发布时间】：2018-04-16 22:14:25
【问题描述】：
我想做的是让它看起来像这样。
但它看起来像这样。
如何修复它，让它看起来像我想要的样子？
所有帮助将不胜感激。
我在想这样的事情，但我无法让它发挥作用。
#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>
基本上就是这样，它一直要求我提供更多信息。基本上就是这样，它一直要求我提供更多信息。基本上就是这样，它一直要求我提供更多信息。基本上就是这样，它一直在问我提供更多信息。基本上就是这样，它一直要求我提供更多信息。
<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>【问题讨论】：
-
这是一个有趣的问题，请查看：stackoverflow.com/help/how-to-ask 了解如何使其更清晰的想法。你都尝试了些什么？这有帮助吗？ stackoverflow.com/questions/42874203/…
-
我按照你的建议提供了我所尝试的信息。
-
它需要是线性渐变，而不是 svg 渐变。
-
所以是的，看起来你可以在
<svg>元素内插入线性渐变的标记（但在它自己的<defs>标签中）。这似乎是在红线下获得任何东西的唯一方法。我会尝试将它放在<image>之后，图像标签本身甚至可能有过滤器。 -
你不能将线条移动到与图像分开的自己的 svg 元素中，并使用绝对定位来覆盖它们以与你的 CSS 渐变一起使用吗？