Question

我试图让这个按钮更改为不同的背景，＆＃39;线性渐变＆＃39;背后有一个图像。这是一个音频播放按钮。

你按下它，它继续，你再次按下，如果熄灭。

初始班级 =您第一次看到的内容（只有线性渐变背景，背后没有图像）

暂停课程 =点击后看到的内容
（透明线性渐变背景，背后有图像）

播放课程 =您再次点击后看到的内容
（透明线性渐变背景，背后有图像）

暂停课程 =点击后看到的内容
（透明线性渐变背景，背后有图像）

svg按钮从初始变为暂停，播放，返回暂停，然后播放，但透明线性gratient背景不会从初始类背景改变。

有人可以帮助我让这段代码正常工作。我一直在努力尝试所有的东西，而且还没有能够让它发挥作用。它会打开和关闭，但是单击背后的背景图像（暂停，播放）后面的背景图像背景永远不会出现，它只会停留在初始类背景，永远不会改变它。这就是问题所在。

我忘了提及，我需要能够将此代码放在某处，两次。这是透明线性渐变背景背后的背景图像。最初的课程没有获得图像，只有第二个，播放和暂停。目前，完整代码中的不是，我正试图找出放置它的位置。

, url('http://via.placeholder.com/266x266');

这是（初始，暂停，播放）按钮独立于按钮代码设置的方式。

https://jsfiddle.net/k9qscyda/4/

初始：

<svg class="initial" style=" border: 3px solid #0059dd;padding:76px 85px 76px 85px;cursor: pointer;background-image: linear-gradient( to right,#000000 83px,#0059dd 83px, #0059dd 86px, #000000 86px, #000000  174px, #0059dd 174px, #0059dd 177px, #000000 177px );"
width="90" height="108" viewBox="0 -3 85 120">
  <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:black; " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
</svg>

暂停：

<svg class="pause" style="border: 3px solid #e77d19; padding:94px 100px 94px 100px;cursor: pointer;background: linear-gradient( to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px ), url('http://via.placeholder.com/266x266');"
width="60" height="72" viewBox="0 0 16 14">
  <path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"
  fill="#1ed760 " fill-rule="evenodd"></path>

播放：

<svg class="play" style="border: 3px solid #e77d19;padding:94px 100px 94px 100px;cursor: pointer;background: linear-gradient( to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px ), url('http://via.placeholder.com/266x266');http://via.placeholder.com/150x150"
width="60" height="72" viewBox="0 0 16 14">
  <path d="M12.945.38l-.652.7623zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z" fill="#1ed760 " fill-rule="evenodd"></path>
</svg>

完整代码低于

https://jsfiddle.net/31exzq4y/5/

这是它的工作顺序。

类=＆＃34;初始＆＃34;

等级=＆＃34;暂停＆＃34;

类=＆＃34;发挥＆＃34;

的代码：

＆＃13;

<button id="playButton2" style="display:block; width: 266px; height: 266px; cursor: pointer;background-image: linear-gradient( to right,#000000 83px,#0059dd 83px, #0059dd 86px, #000000 86px, #000000  174px, #0059dd 174px, #0059dd 177px, #000000 177px ); border: 3px solid #0059dd;"
onclick=" 
    var button = document.getElementById('playButton2');
    var player = document.getElementById('player2');
      document.querySelector('#playButton2 .initial').style.display='none';
      document.querySelector('#playButton2 .pause').style.display='none';
      document.querySelector('#playButton2 .play').style.display='none';
    player.volume=1.0; if (player.paused) {
    playButton2.style.background = 'background: linear-gradient( to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px )';
    playButton2.style.padding = '94px 100px 94px 100px'; 
    playButton2.style.cursor = 'pointer';
    playButton2.style.border='3px solid #e77d19';
    playButton2.style.backgroundRepeat = 'no-repeat';
    playButton2.style.backgroundPosition = 'center'; 
    document.querySelector('#playButton2 .pause').style.display='inline-block';
    player.play();
    } else {
    playButton2.style.background = 'background: linear-gradient( to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px )';
    playButton2.style.border='3px solid #e77d19';
    playButton2.style.padding = '94px 100px 94px 100px'; 
    playButton2.style.cursor = 'pointer';
    playButton2.style.backgroundRepeat = 'no-repeat';
    playButton2.style.backgroundPosition = 'center'; 
    document.querySelector('#playButton2 .play').style.display='inline-block';
    player.pause();
    }">

  <svg class="pause" style="display: none;" width="60" height="72" viewBox="0 0 16 14">
    <path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"
    fill="#1ed760 " fill-rule="evenodd"></path>
  </svg>

  <svg class="play" style="display: none;" width="60" height="72" viewBox="0 0 16 14">
    <path d="M12.945.38l-.652.7623zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z" fill="#1ed760 " fill-rule="evenodd"></path>
  </svg>

  <svg class="initial" width="90" height="108" viewBox="0 -3 85 120">
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:black; " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
  </svg>
</button>

<audio id="player2" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>

＆＃13;

Answer 1

您尝试将背景设置为无效值，因此会被忽略。更改行以删除额外的background:文字：

小提琴：https://jsfiddle.net/31exzq4y/6/

具体的变化是：

from: playButton2.style.background = 'background: linear-gradient( [...etc];
to:   playButton2.style.background = 'linear-gradient( [...etc];

和else块相同。

这里是背景图片：https://jsfiddle.net/31exzq4y/7/

您需要在网址前添加https://并转义引号。

点击

1 个答案: