Question

我试图在悬停时将按钮颜色更改为50％不透明度。当我知道颜色是什么但它会在运行时发生变化时，这很简单。

我有什么想法可以用CSS3做到这一点？我知道我可以用LESS很容易地做到这一点，但我无法使用它。

.my-btn {
    background-color: rgba(255,0,0,1); /* Will change at run time to anything */
}

.my-btn:hover {
    background-color: rgba(?,?,?,0.5); /* I dont know what the rgb values will be */
}

Answer 1

问题

使用按钮本身的opacity属性会影响按钮的文本;不理想。

解决方案

将背景颜色应用于伪元素而不是，并将其叠加在带有负z-index的文本下方。需要时，使用伪元素上的opacity属性创建透明背景。

实施例

注意：伪元素无法应用于<input>元素，因为它不能有子元素。这仅适用于可以包含子项的元素，例如<button>和<a>。

button {
  position: relative;
  background: none;
  border: solid 1px #EEE;
  padding: 10px;
  border-radius: 5px;
  overflow: hidden;
}
button:before {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  background: red;
  z-index: -1;
  opacity: .5;
}
button:hover:before {
  opacity: .8;
}
button:active:before {
  background: orange;
}

<button>Button</button>

Answer 2

这有点棘手，因为使用rgb背景颜色和不透明度的组合听起来会起作用，但不透明度将适用于元素内部的所有内容 - 包括文本。有很多方法可以解决这个问题，所以请使用适合您情况的解决方案。

基本上你必须将背景元素与按钮的其余部分分开，这样只有背景颜色会受到悬停时不透明度变化的影响。

.my-btn:hover a {
  background-color: rgb(255,0,0);
  opacity:.5;
}
<div class="my-btn">
  <span aria-hidden="true">whatever</span>
  <a href="#"><span class="sr-only">whatever</span></a>
</div>

Here's a demo

Answer 3

使用opacity属性：

.my-btn:hover {
   opacity: 0;
}

.my-btn:hover {
  opacity: 0;
  }

<input class="my-btn" type="submit"></input>

更改颜色不透明度当不知道RGB值只有Alpha

3 个答案:

问题

解决方案

实施例