如何在背景不透明度较低的情况下保持文本不透明度 100%，同时应用悬停 [重复]答案

【问题标题】：How to keep text opacity 100% with a lower background opacity, while ALSO applying hover [duplicate]如何在背景不透明度较低的情况下保持文本不透明度 100%，同时应用悬停 [重复]
【发布时间】：2021-10-31 06:51:07
【问题描述】：

所以基本上我有 4 个按钮样式的链接。尽管文本继承了不透明度，但我以我想要的方式在我的 CSS 中应用了悬停效果。我想防止这种情况发生，并且在悬停时唯一改变不透明度的是 .button 的背景颜色，同时始终保持默认字体不透明度。如您所见，它在悬停时可读，但在未悬停时字体不可读，这就是我希望文本不透明度保持不变的原因。

有什么解决办法吗？

<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="css/style3.css">
</head>

<body>
<img src="images/portfolioAni.gif" class="img">
<img src="images/portfolioAniMobile.gif" class="imgmobile">
<div class="font">
    <p class="note">Welcome to my Portfolio, below you will find a menu of <br>
     all my coding assignments I completed in school. Some basic <br>
     exercices as well as entire websites using HTML, CSS, <br> 
     Javascript,Bootstrap and PHP.</p>
</div>

<main>
<img src="images/web.jpg" class="img2">
<img src="images/webmobile.jpg" class="img2mobile">
<div class="container1">
    <a href="htmlpage.html"><div class="button"><p>HTML and CSS</p></div></a>
    <a href="Project.html"><div class="button"><p>Javascript</p></div></a>
    <a href="Project.html"><div class="button"><p>PHP</p></div></a>
    <a href="Project.html"><div class="button"><p>Bootstrap</p></div></a>
</div>
</main>
<div class="block"></div>




</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</html>

.img{
    display: block;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  max-width: 100%;
  height: auto;
}

.imgmobile{
    display: none;
}

p{
    text-align: center;
    font-size: 20px;
    font-family: OCR A Std, monospace ;
    text-decoration: none;
}

.note{
    margin-top: 100px;
    margin-bottom: 50px;
}

.img2{
  width: 100%;
  display: block;
}
.img2mobile{
  width: 100%;
  display: none;
}

.button{
    background-color: rgba(219, 193, 142, 0.9);
  border: none;
  color: white;
  text-align: center;
  font-size: 16px;
  opacity: 0.7;
  transition: 0.3s;
  display: block;
  text-decoration: none;
  cursor: pointer;
  height: 40px;
  width: 200px;
  margin-bottom: 25px;
  line-height: 2;
  border-radius: 2px;
}

.button:hover {opacity: 1}


a:link{ 
    text-decoration: none;
}

.block{
    width: auto;
    height: 20px;
    background-color: rgba(219, 193, 142);
    margin-top: 20px;
    margin-bottom: 10px;
}

main{
    position: relative;
    display: grid;
    place-items: center;
}
.container1{
    position: absolute;
}

【问题讨论】：

标签： css hover opacity

【解决方案1】：

使用不同的元素背景和文字

<button>
    <div class="bg"></div>
    <span>Text</span>
</button>

button {
    position: relative;
}
button > .bg {
    position: absolute;
    inset: 0;
    background-color: red;
    opacity: 1;
}
button:hover > .bg {
    opacity: 0;
}

或css 在选择器之前之后

<button>
    <span>Text</span>
</button>

button {
    position: relative;
}
button::before {
    content: " ";
    position: absolute;
    inset: 0;
    background-color: red;
    opacity: 1;
}
button:hover:before {
    opacity: 0;
}

【讨论】：