0

请看下面的jsBin：

http://jsbin.com/uyonux/1

它在悬停状态下按需要工作。然而，焦点状态不能按预期工作，我希望蓝色不继承 0.4 的不透明度，我希望它是纯色#13A3F7 颜色。有没有办法在不使用元素不透明度的情况下附加边框？

我尝试了伪元素，但它们也继承了不透明度。

另一种解决方案可能是使用 60% 以上的#13A3F7，但我认为由于饱和而无法使用。

我知道我可以更改图像，但关键是我们正在尝试使用一个黑色图标，然后在各种状态下调整它的不透明度。

谢谢

button {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAALElEQVR42mNgwA/+QzHZYGAM2E8ADwED6B+I+ynEpPsLzfJBYgBFYTDEMxMA8SA+M9tIcT0AAAAASUVORK5CYII=") ;
  border: none;
  height: 23px;
  width: 26px;
  background-repeat: no-repeat; 
  opacity: 0.4;
  filter: alpha(opacity=40);
  background-position: center center;
}

button:focus {
    border: 1px solid #13A3F7;
}

button:hover {
    background-color: #CFCFCF;
    box-shadow: 0 1px #696969;
    opacity: 0.65;
    filter: alpha(opacity=65);
  cursor:pointer;
}

另外我现在需要支持 IE8 :(

4

2 回答 2

2

您可以使用RGBa 颜色。

像这样： 

border: 10px solid #ff0000;
border-color: rgba( 255,0,0,0.5);
于 2013-08-09T20:14:51.270 回答
1

使用大纲：而不是边框​​，像这样：

button:focus, button:active {
  outline: 1px solid #13A3F7 !important;
}

编辑：您可以通过使用链接而不是按钮来实现这一点。看看这个 Plunker：http ://plnkr.co/edit/NZ3lOyFBSxOFwSExyBpA?p=preview

于 2013-08-09T20:20:06.297 回答