相关疑难解决方法(0)

我有一组<a>标签具有不同的rgba背景颜色但相同的alpha.是否可以编写单个css样式,仅更改rgba属性的不透明度？

代码的快速示例:

 <a href="#"><img src="" /><div class="brown">Link 1</div></a>
 <a href="#"><img src="" /><div class="green">Link 2</div></a> 

和风格

a {display: block; position: relative}
.brown {position: absolute; bottom: 0; background-color: rgba(118,76,41,.8);}
.green {position: absolute; bottom: 0; background-color: rgba(51,91,11,.8);}

我想要做的是写一个单一的样式,它会在<a>悬停时改变不透明度,但保持颜色不变.

就像是

a:hover .green, a:hover .brown {background-color: rgba(inherit,inherit,inherit,1);}

我有一个60%不透明度的div,以显示div后面的背景图像的一部分.由于不透明度为60%,因此该div中的文本显示为灰色.

反正是否覆盖此级别并使文本显示为黑色？

任何建议表示赞赏

谢谢.

我有一个img黑色覆盖层。覆盖层内有一个opacity和一个白色文本。当我将包装器悬停时，opacity可以看到带有不同文本的红色覆盖层。它工作正常。我唯一的问题是，删除opacity叠加层内的文本。文字是白色的，但也是透明的。我该如何管理它，将文本放在透明容器中而不会对字母/文本产生透明效果？我知道，如果我把文本从这个盒子里拿出来并在中心 id 中设置样式它会起作用。但我想在透明容器中包含文本元素。希望这已经足够清楚了。有任何想法吗？

.wrapper {
  position: relative;
  width: 300px;
  height: 200px;
}

.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.overlay-black {
  background: black;
  opacity: 0.4;
}

.overlay-red {
  background: red;
  opacity: 0.8;
  display: none;
}

.wrapper:hover .overlay-black {
  display: none;
}

.wrapper:hover .overlay-red {
  display: flex;
}

h2,
p {
  color: white;
}

img {
  width: 100%;
  height: 100%;
} …