添加背景：不重复初始图像

Question

我有一张图片，我想添加背景：不重复它，我该怎么做？

对于这部分代码，您看到的是第一张图片。

https://jsfiddle.net/f4vum1oL/

<button id="playButton" style="display:block;width: 606px;height:50px;border-radius:50px;background-image: linear-gradient( to right,#000000 198px,#0059dd 198px, #0059dd 201px, transparent 201px, transparent 399px, #0059dd 399px, #0059dd 402px, #000000 402px ), url('https://i.imgur.com/HI58CKg.png'); border: 3px solid #0059dd; cursor: pointer;font-family: Tahoma; font-weight: bold;font-size:23px; color:#000000; "

这张图片被搞砸了，我想对它添加不重复，我该怎么做？

相反，这就是它的样子。

代码：

＆＃13;

＆＃13;

<button id="playButton" style="display:block;width: 606px;height:50px;border-radius:50px;background-image: linear-gradient( to right,#000000 198px,#0059dd 198px, #0059dd 201px, transparent 201px, transparent 399px, #0059dd 399px, #0059dd 402px, #000000 402px ), url('https://i.imgur.com/HI58CKg.png'); border: 3px solid #0059dd; cursor: pointer;font-family: Tahoma; font-weight: bold;font-size:23px; color:#000000; "

onclick="  
var button = document.getElementById('playButton');
  var player = document.getElementById('player'); player.volume=1.0;
  if (player.paused) {
    playButton.innerHTML = '<img src=\'https://i.imgur.com/HI58CKg.png\'>';
    playButton.style.background = 'linear-gradient( to right, #00ffff 198px,#0059dd 198px, #0059dd 201px, #ffffff 201px, #ffffff 399px, #0059dd 399px, #0059dd 402px, #ff00ff 402px )';
 
    player.play();
  } else {
    playButton.innerHTML = '<img src=\'https://i.imgur.com/HI58CKg.png\'>';
    playButton.style.background = 'linear-gradient( to right, #000000 198px,#0059dd 198px, #0059dd 201px, #000000 21px, #000000 399px, #0059dd 399px, #0059dd 402px, #000000 402px )';
    player.pause();
  }">

</button>

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

答案

background-repeat:no-repeat;background-position: center; background-color: black;

https://jsfiddle.net/myjezyuv/3/

＆＃13;

＆＃13;

<button id="playButton" style="display:block; width: 606px; height: 50px; cursor: pointer; border: 3px solid rgb(0, 89, 221); border-radius: 50px; background-image: linear-gradient(to right, rgb(0, 0, 0) 198px, rgb(0, 89, 221) 198px, rgb(0, 89, 221) 201px, transparent 21px, transparent 399px, rgb(0, 89, 221) 399px, rgb(0, 89, 221) 402px, rgb(0, 0, 0) 402px), url('http://via.placeholder.com/40x40'); background-repeat: no-repeat; background-position:center; background-color: black;"
  onclick="  
var button = document.getElementById('playButton');
  var player = document.getElementById('player'); player.volume=1.0;
  if (player.paused) {
    playButton.innerHTML = '';
    playButton.style.background = 'linear-gradient( to right, #00ffff 198px,#0059dd 198px, #0059dd 201px, transparent 201px, transparent 399px, #0059dd 399px, #0059dd 402px, #ff00ff 402px ), url(\'http://via.placeholder.com/40x40\')';
playButton.style.backgroundColor = 'white';
playButton.style.backgroundRepeat = 'no-repeat';
playButton.style.backgroundPosition = 'center';  
    player.play();
  } else {
    playButton.innerHTML = ''
    playButton.style.background = 'linear-gradient( to right, #000000 198px,#0059dd 198px, #0059dd 201px, transparent 21px, transparent 399px, #0059dd 399px, #0059dd 402px, #000000 402px ), url(\'http://via.placeholder.com/40x40\')';
playButton.style.backgroundColor = 'black';
playButton.style.backgroundRepeat = 'no-repeat';
playButton.style.backgroundPosition = 'center'; 
    player.pause();
  }"></button>

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

＆＃13;

＆＃13;

＆＃13;