0

对于 Windows 8 应用程序，我可以使用“Segoe UI 符号”创建 AppBar 样式按钮，但它们已在矩形区域中绘制，因此具有矩形背景。因为我想在悬停期间将它们的背景设置为不同的颜色，所以我需要去掉这个矩形。

正如下面的问题所指出的，按钮和样式的定义如图所示。

请指导如何实现这一点。

从角色创建图像

HTML：

<button id="myAppBarIcon" class="normal-size-icon">&#xE1D8;</button>

CSS：

.normal-size-icon {
    margin-top: 400px;
    margin-left: 630px;
    position: relative;
    font-size: 24px;
    font-family: 'Segoe UI Symbol';
    color: rgb(255, 255, 255);
    background: none;
    border: none;
}

更新：

下面的代码可以解决问题，但字体没有正确对齐。可能是因为它没有正确对齐。下图显示了布局。

.normal-size-icon {
    font-size: 24px;
    font-family: 'Segoe UI Symbol';
    color: rgb(555, 255, 255);
    min-width: 0;
    min-height: 0;
    border-radius: 50%;
    border-style: solid;
    padding: 0;
    text-align: center;
}

字体未正确对齐

4

2 回答 2

2

对于这一点，您需要进行设置border-radius:50%;，以便您的按钮将形状更改为圆形，然后添加min-width:0; min-height:0;，text-align:center;这是完整的 css：

.normal-size-icon {
    font-size: 24px;
    font-family: 'Segoe UI Symbol';
    color: rgb(555, 255, 255);
    min-width: 0;
    min-height: 0;
    border-radius: 50%;
    border-style: solid;
    padding: 0;
    text-align: center;
}

如果你不需要边框，你可以设置border:none;. 对不起，我的英语不好

于 2013-01-08T04:13:22.047 回答
0

此行为由 驱动，CSS hover selector按钮的默认 CSS 将提供与浅色或深色主题对齐的内容，例如，

button:hover, input[type=button]:hover, input[type=reset]:hover,
input[type=file]::-ms-browse:hover {
    background-color: rgba(255, 255, 255, 0.13);
    border-color: rgb(255, 255, 255);
}

您可以使用以下内容非常具体地覆盖它：

.normal-size-icon:hover {
    background-color: red;
}

但是您可能希望对其他状态和对象进行类似处理。

看看你的参考文献中包含的ui-light.cssand ；![ui-dark.css][1]所有的答案都在那里:)

在此处输入图像描述

于 2013-01-08T01:39:16.363 回答