Ajout d'arrière-plan: non-répétition à l'image initiale

Question

J'ai une image, je veux ajouter un arrière-plan: pas de répétition, comment puis-je faire cela?

Pour cette partie du code, la première image que vous voyez.

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

Cette image fait sauter, je veux y ajouter pas de répétition, comment dois-je faire cela?

Au lieu de cela, voici ce qu'elle ressemble.

code:

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

Answer 1

La réponse

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

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

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