Как изменить непрозрачность некоторого текста без изменения непрозрачности фона - PullRequest
Новая
       0

Как изменить непрозрачность некоторого текста без изменения непрозрачности фона

0 голосов
/ 26 апреля 2020

Я написал этот код 

.container {
  width: 200px;
  height: 200px;
  position: relative;
  display: inline-block;
  background: #E7E7E7;
}

.overlay {
  position: absolute;
  opacity: 0;
  transition: all .3s ease;
  background: red;
}

.container:hover .overlay {
  opacity: .3;
}

.overlay-top {
  width: 200px;
  height: 0;
}

.container:hover .overlay-top {
  height: 200px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div class="container ">
    <div class="overlay overlay-top">
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quisquam mollitia, explicabo, a animi earum vel et quidem consequatur facere asperiores alias dignissimos expedita dicta iusto tempora similique? Sit, vitae?</p>
    </div>
  </div>
</body>

</html>

Я не могу изменить непрозрачность текста без изменения непрозрачности фона, даже когда я открываю стиль для этого текста и устанавливаю непрозрачность абзаца в 1 ничего не изменилось Кто-нибудь может мне помочь?

1 Ответ

0 голосов
/ 26 апреля 2020

Вы не можете выполнить это условие только с помощью прозрачности, вам нужно изменить цвет фона на RGBA, а затем сохранить прозрачность всего наложения до 1. Я только что изменил 2 свойства из вашего кода. 

.container {
  width: 200px;
  height: 200px;
  position: relative;
  display: inline-block;
  background: #E7E7E7;
}

.overlay {
  position: absolute;
  opacity: 0;
  transition: all .3s ease;
  background: rgba(255, 0, 0, 0.3);
}

.container:hover .overlay {
  opacity: 1;
}


.overlay-top {
  width: 200px;
  height: 0;
}

.container:hover .overlay-top {
  height: 200px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div class="container ">
    <div class="overlay overlay-top">
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quisquam mollitia, explicabo, a animi earum vel et quidem consequatur facere asperiores alias dignissimos expedita dicta iusto tempora similique? Sit, vitae?</p>
    </div>
  </div>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...