Question

例如，具有多个输入的CSS属性：

这样的事情可能吗？

.button:active {
  background-color: rgba(inherit, inherit, inherit, 0.5);
}

使用像LESS这样的脚本化css是唯一的方法吗？

Answer 1

您可以通过稍微不同地解决问题来获得给出的示例的答案。通过将背景颜色放在z-index为-1的伪元素上，使其位于内容后面（z-index为1），然后只改变不透明度......你已经实现了你想要上面没有任何不足。

看到这个小提琴：https://jsfiddle.net/3uopd059/

.button {
  padding:1em;
  position:relative;
  float:left;
  color:#000;
  z-index:1;
}
.button::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color: grey;
  z-index:-1;
}
.button:active::after {
  opacity:0.5;
}

当然，如果你想独立改变每种颜色，那么你需要使用另一种方法。

Answer 2

在考虑了一下之后，这里有一个可以实现你想要的东西的解决方法，除了你优雅地称之为vanilla CSS的东西。将opacity（以及background color）传递给伪元素，absolute ly position ed：

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Shadows+Into+Light');
button {
  font-family: 'Shadows Into Light', cursive;
  position: relative;
  font-size: 2rem;
  color: white;
  margin: 1rem;
  min-width: 15rem;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  cursor: pointer;
}
button>span {
  position: relative;
  z-index: 1;
}
button::before {
  content: '';
  display: block;
  position: absolute;
  top: 0; left:0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity .3s cubic-bezier(.4,0,.2,1);
  z-index: 0;
  background-color: #bada55;
  border-radius: .4rem;
}
button[orange]:before {
  background-color: #f50;
}
button:hover::before {
  opacity:.65;                              /* <-- the juice is here */
}

/* don't mind the below, i'm just playing */

body {
  margin: 0; padding: 0;
}
center-me-please {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: transparent url(http://lorempixel.com/g/1200/800/fashion) no-repeat 50% 50% /cover;
}

＆＃13;

<center-me-please>
  
  <button><span>#bada55</span></button>
  <button orange><span>not so #bada55</span></button>

＆＃13;

是否有一种方法可以在修改某些内容时从父级继承CSS属性？

2 个答案: