我想在 JavaFX(不是 html)中创建这样的按钮。
(将鼠标悬停在它们上面以查看效果)
[愚蠢的 Stackoverflow 坚持要我在这里发布不相关的 jsfiddle 代码]
<li><a href="/help/2/">Button 1</a></li
>
因此具有圆形边框和透明背景。不幸的是,背景/插入技术似乎从外到内覆盖了内容。因此,如果您绘制明亮的边框,那么如果不对颜色进行硬编码,则无法撤消亮度以创建深色和透明的背景。 IE。它不是一次编写,到处运行,在不同颜色的面板上运行。
-fx-border-color 似乎不支持四舍五入或者至少不在此处推荐 Set border size .我想边框的圆 Angular 与背景的圆 Angular 不同步。
看来 HTML5 在这方面有优势。告诉我我错了:-) ...虽然我怀疑如果不为每个按钮上下文指定颜色就无法完成我的问题。
棕色点。 请注意,我意识到我已经将白色边框涂成绿色(上下文相关),我很高兴将半透明白色边框作为解决方案。一等奖是 photoshop 的加深/减淡/等(背景色)功能。
B 计划。 没有圆边看起来还不错,所以也许我应该求助于 -fx-border-color
最佳答案
背景信息
查看关于 "looked-up colors" 的 css 文档中的信息(向下滚动一点,超出命名的颜色部分)。
这些方法的基本工作方式是,您可以定义“查找颜色”(即颜色值变量)并将其应用于场景图中的节点。该值由场景图中该节点的后代节点继承。
现在浏览默认样式表,modena.css .它的工作方式是几乎所有的东西都是根据一个非常短的查找颜色列表来定义的。结果是您可以轻松地“主题化”您的应用程序,只需在场景的根部重新定义这些颜色即可。尝试将此样式表添加到您最喜欢的 JavaFX 应用程序中:
.root {
-fx-base: #c7dec7;
-fx-accent: #00c996 ;
-fx-default-button: #abedd8 ;
-fx-focus-color: #03d39e;
-fx-faint-focus-color: #03d39e22;
}
如您所见,默认样式表中根本没有使用 -fx-border
;相反,边框是通过定义“嵌套”背景颜色来实现的,这些背景颜色本质上是彼此重叠的矩形填充。这显然更有效(根据我的理解,相当有效)。所以你是正确的,使两个背景的内部透明只会显示“外部”边框颜色,而不是背景的颜色。
如何实现您的目标
Pane 的背景默认为查找到的颜色 -fx-background
,而后者又默认为较浅版本的 -fx-base
。因此,如果您坚持通过更改 -fx-background
或 -fx-base
来更改包含按钮的 Pane 的颜色,则可以通过设置使按钮显示透明它的背景
-fx-background-color: (some-border-color), -fx-background ;
按钮的默认边框包含三个值; -fx-shadow-highlight
、-fx-outer-border
和 -fx-inner-border
。您可以单独覆盖这些值,或者根据需要重新定义背景颜色。
在这个例子中是你想要的近似值:你可以弄乱边界厚度的精确值(来自第二个 -fx-background-insets
值)和半径 Angular 以根据需要获得它。如果您想尝试一下,可以尝试组合梯子和渐变。
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class StyledButtonExample extends Application {
private int currentColorIndex = 0 ;
private final String[] baseColors = new String[] {"#8ec919", "#bfe7ff", "#e6e6fa",
"#ffcfaf", "#fff7f7", "#3f474f"};
private StackPane root ;
@Override
public void start(Stage primaryStage) {
root = new StackPane();
Button button = new Button("Change colors");
button.setOnAction(event -> changeColors());
root.getChildren().add(button);
Scene scene = new Scene(root,400,400);
scene.getStylesheets().add(getClass().getResource("transparent-button.css").toExternalForm());
root.setStyle("-fx-base: "+baseColors[0]+";");
primaryStage.setScene(scene);
primaryStage.show();
}
private void changeColors() {
currentColorIndex = (currentColorIndex + 1) % baseColors.length ;
root.setStyle("-fx-base: "+baseColors[currentColorIndex]+";");
}
public static void main(String[] args) {
launch(args);
}
}
透明按钮.css:
.button {
-fx-background-color: derive(-fx-base, 60%), -fx-background ;
-fx-background-insets: 0, 1px ;
-fx-background-radius: 4px, 0 ;
}
.button:hover {
-fx-background-color: #fff, derive(-fx-background, -5%) ;
}
关于css - 如何在 JavaFX 中为按钮创建具有半透明背景的圆 Angular 边框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23782342/