求助,现在不会弄了。 阅读:1848回复:3
很久以前,我自己改了一个 【用户界面】 吊旗 最小化 最大化 关闭 样式
但是现在是用不了了。也忘了怎么弄得了
上面这是效果图。 原本来的链接在这里: https://userstyles.org/styles/120048/window-controls-minimize(这个链接我现在都打不开了,呜呜呜) 现在我不会弄了,也忘的差不多了。 请问这里有谁会弄么? |
最简单的做法是,自己用绘图工具画两种状态下的图片,保存成支持透明效果的图片格式比如png、webp。然后将图片文件内容转成base64表示。
转base64可以用在线工具比如 https://www.btool.cn/base64-file-converter 然后写这么一段css,titlebar-min是当前版本中最小化按钮的class,最大化是titlebar-max,关闭是titlebar-close .titlebar-min {
appearance: none;
background: url(data:图片mime类型;base64,普通状态图片内容的base64编码);
height: 图片高度;
width: 图片宽度;
padding: 0;
}
.titlebar-min:hover {
background: url(data:图片mime类型;base64,鼠标进入状态图片内容的base64编码);
}
.titlebar-min image {
display: none;
}比如像下面一样
.titlebar-min {
appearance: none;
background: url(data:image/webp;base64,UklGRtIAAABXRUJQVlA4WAoAAAAQAAAAHQAAKwAAQUxQSBQAAAABUNq2AZP/ny4uWyQiJgBZObAgA1ZQOCCYAAAAsAUAnQEqHgAsAD69TKFLpyQjobVb/ADgF4lkAMIFQTz2oAeuOA8j/ZY0M+8wly+j4QF7yUUAAP6YC9/dS8O4/zD81f9vP4UKr9APM27/FkUSP9LkBcAAolUYLzIcuHDfX6wbz0GbpyT3RSZY+TwE6ZwW+bsUvCvcrsCSLw08e8Bp9//+UMBLlmkU6PQE6pbxJRiS5rgAAAA=);
height: 44px;
width: 30px;
padding: 0;
}
.titlebar-min:hover {
background: url(data:image/webp;base64,UklGRhoBAABXRUJQVlA4WAoAAAAQAAAAHQAAKwAAQUxQSBQAAAABUNq2AdP/ny6erCAiJgCU4pLMBlZQOCDgAAAAsAYAnQEqHgAsAD7JUqBLp6SjIbAarVDwGQloALEfoYWnp93oDp9ZuEXCNDwaa/P7tjbf2LqFsSjmgC4vzwAA/rXvlOtcAqKQX/zuHEviqa3IZ5nv+3iUNYhevDi5mR+69zKBp44IEdS5kHafGNGgPYYgl6rVxpZ6dEptxGLe0iLnMY7MoWVM+EGTSYW3FcxgheqwHuAmHg/6zGeMZxiNDVomSeNfd2eWT2rsoBZNFPr97I/heZrfMvarW8bBTceUpiUBoC29cHXHOvR50tX/had9NSdp4jDevKcHv27IYAA=);
}
.titlebar-min image {
display: none;
}你要用clip-path之类的纯css技巧来实现那个旗帜效果也是可以的
.titlebar-min {
appearance: none;
clip-path: polygon(0 0, 0 70%, 50% 85%, 100% 70%, 100% 0);
background-color: orange !important;
height: 30px;
width: 21px;
position: relative;
padding: 0;
}
.titlebar-min::before {
content: '';
clip-path: polygon(0 0, 0 70%, 50% 85%, 100% 70%, 100% 0);
position: absolute;
left: 1px;
top: -1px;
right: 1px;
height: 100%;
background: yellow;
}
.titlebar-min::after {
content: 'v';
position: absolute;
height: 100%;
text-align: center;
color: orange;
scale: 1.5 0.5;
}
.titlebar-min:hover {
clip-path: polygon(0 0, 0 80%, 50% 95%, 100% 80%, 100% 0);
background-color: orange;
}
.titlebar-min:hover::before {
clip-path: polygon(0 0, 0 80%, 50% 95%, 100% 80%, 100% 0);
}
.titlebar-min:hover::after {
color: black;
padding-top: 10px;
} |
taoww:最简单的做法是,自己用绘图工具画两种状态下的图片,保存成支持透明效果的图片格式比如png、webp。然后将图片文件内容转成base64表示。谢谢,有空我研究下 |