图像没有正确覆盖按钮

Question

我无法正确调整图像的大小，使图像和按钮彼此适合。

以下是代码的重要部分：

<Button prefHeight="80" prefWidth="80" id="LifeLine">
   <shape>
       <javafx.scene.shape.Circle radius="1"/>
    </shape>
</Button>

CSS文件

#LifeLine
{
-fx-background-image: url("/millionairetriviagame/ImageFiles/AudienceButton.png");
-fx-smooth: true;
-fx-background-repeat: stretch; 
-fx-background-size: 80 80;
-fx-background-position: center center;
-fx-background-insets: 0, 0, 0, 0;
}

这是截图。左上角的按钮是问题所在。

修改

现在我用我发布的代码得到了这样的按钮。

Answer 1

将背景重复更改为不重复或删除该属性

Answer 2

这不是答案，因为按钮和图像之间仍然存在小的差距，但这是我目前可以提供的最佳解决方案。带有此代码的图像现在以按钮为中心，不再重复。现在我需要弄清楚为什么图像圈和按钮圈的大小都不一样，即使它们具有相同的高度和宽度。

<Button prefHeight="80" prefWidth="80" >
   <shape>
         <javafx.scene.shape.Circle radius="1" /> 
   </shape>
   <graphic>
       <ImageView fitHeight="80" fitWidth="80" smooth="true" >
           <image>
                 <Image url="@ImageFiles/AudienceButton.png"/>
           </image>    
      </ImageView>
  </graphic>
</Button>

更好的解决方案

     <Button prefHeight="70" prefWidth="70"  >
                    <shape>
                        <javafx.scene.shape.Circle radius="1" /> 
                    </shape>
                    <graphic>
                        <ImageView fitHeight="70" fitWidth="70" scaleX="1.2" scaleY="1.2"  smooth="true" >
                            <image>
                                <Image url="@ImageFiles/AudienceButton.png"/>
                            </image>    
                        </ImageView>
                    </graphic>
                </Button>

我所要做的就是将图像从x和y方向缩放到按钮的大小。