Question

请参阅以下jsBin：

它在悬停状态下正常工作。然而焦点状态在焦点上不起作用我希望蓝色不能继承.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);

Answer 2

使用大纲：代替边框，如下所示：

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

修改：您可以使用链接代替按钮来实现此目的。看看这个Plunker：http://plnkr.co/edit/NZ3lOyFBSxOFwSExyBpA?p=preview

绘制一个边框但让它没有继承对象的不透明度

2 个答案: