css - 绘制边框但不让它继承对象不透明度

Question

请看下面的jsBin:

http://jsbin.com/uyonux/1

它在悬停状态下按预期工作。但是，焦点状态在焦点上无法按预期工作，我希望蓝色不继承 .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 :(

Answer 1

你可以使用 RGBa colors .

像这样:

border: 10px solid #ff0000;
border-color: rgba( 255,0,0,0.5);