[css] 마우스 오버시 rgba 배경색의 알파 만 변경할 수 있습니까?

원하는 경우 숫자를 하드 코딩 할 필요가 없도록 다양한 작업을 수행 할 수 있습니다. 이러한 방법 중 일부는 불투명도를 낮추는 대신 실제로 흰색을 추가하기 때문에 일반 흰색 배경을 사용하는 경우에만 작동합니다. 첫 번째는 제공된 모든 항목에서 잘 작동합니다.

• 당신은 무언가에 대해 의사 요소를 이미 사용하고 있지 않습니다. 과
• 태그 position에서 상대 또는 절대로 설정할 수 있습니다.<div>

옵션 1 : ::before의사 요소 :

.before_method{
  position:relative;
}
.before_method:before{
  display:block;
  content:" ";
  position:absolute;
  z-index:-1;
  background:rgb(18, 176, 41);
  top:0;
  left:0;
  right:0;
  bottom:0;
  opacity:0.5;
}
.before_method:hover:before{
  opacity:1;
}

옵션 2 : 흰색 gif 오버레이 :

.image_method{
  background-color: rgb(118, 76, 41);
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/f/fc/Translucent_50_percent_white.png)
}
.image_method:hover{
  background-image:none;
}

옵션 3 : box-shadow방법 :

gif 방법의 변형이지만 성능 문제가있을 수 있습니다.

.shadow_method{
  background-color: rgb(18, 176, 41);
  box-shadow:inset 0 0 0 99999px rgba(255,255,255,0.2);
}
.shadow_method:hover{
  box-shadow:none;
}

CodePen 예제 : http://codepen.io/chrisboon27/pen/ACdka

답변

.brown {
  --rgb: 118, 76, 41;
}
.green {
  --rgb: 51, 91, 11;
}
.brown, .green {
  --alpha: 0.3;
  background-color: rgba(var(--rgb), var(--alpha));
}

a:hover .green, a:hover .brown {
  --alpha: 1;
}

a {
  display: block;
  position: relative;
}
.brown {
  --rgb: 118, 76, 41;
}
.green {
  --rgb: 51, 91, 11;
}
.brown, .green {
  display: inline-block;
  --alpha: 0.3;
  background-color: rgba(var(--rgb), var(--alpha));
  font-size: 40px;
  margin: 20px;
}

a:hover .green, a:hover .brown {
  --alpha: 1;
}

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

a{
  background: green
}
a:hover{
  background-image:linear-gradient(hsla(0,0%,0%,.2) 100%,transparent 100%) // darker
}
a:hover{
  background-image:linear-gradient(hsla(255,100%,100%,.2) 100%,transparent 100%) // lighter
}

a:hover{
   filter: brightness(80%) //darker
}
a:hover{
   filter: brightness(120%) //lighter
}

a
{
    position: relative;
    display:inline-block;
    background: rgba(red, 0.75);
    padding: 20px;


   &:before
   {
     content: ' ';
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
   }

   &:hover
   {
     &:before
     {
       background-color: rgba(#000, 0.25);
     }
   }
}