图像未正确覆盖按钮答案

【问题标题】：Image doesn't properly cover the button图像未正确覆盖按钮
【发布时间】：2015-06-28 20:29:09
【问题描述】：

我无法正确调整图像的大小以使图像和按钮相互适合。

这是代码的重要部分：

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

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

编辑

现在我用我发布的代码获得了喜欢这个的按钮。

【问题讨论】：

将css显示块设置为按钮，或者inline-block
@GiacomoPaita 在我的 CSS 文件中我可以做 -fx-display-caret: 但没有类似的东西 -fx-display: inline-block;我可以使用。
-fx 是什么类型的 CSS 规则？
@GiacomoPaita 我应该说它是与 javafx 集成的 CSS。
我看到你已经编辑了你的问题：你最终解决了你的问题吗？

标签： java image button javafx fxml

【解决方案1】：

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

【讨论】：

【解决方案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 方向缩放到按钮的大小。

【讨论】：