删除文本上的不透明度[重复]答案

【问题标题】：Remove opacity on text [duplicate]删除文本上的不透明度[重复]
【发布时间】：2021-02-02 02:21:19
【问题描述】：

我有以下代码，并为纯色叠加颜色添加了不透明度。问题是文本也使用了不透明度。如何更改它以使文本没有不透明度并位于顶部？

.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #008CBA;
  opacity: .5;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.container:hover .overlay {
  bottom: 0;
  height: 100%;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

<div class="container">
  <img src="https://cdn.searchenginejournal.com/wp-content/uploads/2019/07/the-essential-guide-to-using-images-legally-online-1520x800.png" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

谢谢约翰

【问题讨论】：

不要使用不透明度，而是使用 rgba() 颜色作为背景。或background-color: #008CBA80

标签： html css

【解决方案1】：

使用 RGBA 配色方案代替不透明度

RGB：#RRGGBBAA，而 A 是 alpha。你也可以使用rgba(r,g,b,a)

.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #008CBA99; /* Instead of #008CBA */
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
}

.container:hover .overlay {
  bottom: 0;
  height: 100%;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

<div class="container">
  <img src="https://cdn.searchenginejournal.com/wp-content/uploads/2019/07/the-essential-guide-to-using-images-legally-online-1520x800.png" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

【讨论】：

@John Higgins 完美答案，这是使用不透明度颜色的正确方法。

【解决方案2】：

我以前遇到过这个问题，我使用过::before，我将它用于图像，但我认为它也适用于背景颜色我使用的 CSS；

.style::before{
background-image: url(/images/bg_button.png);
  background-repeat: no-repeat;
  opacity: 0.15;
  width: 100%;
  height: 100%;

content: "";
  background-size: cover;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

【讨论】：