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

<a>rgba 배경색은 다르지만 알파는 동일한 태그 세트가 있습니다. rgba 속성의 불투명도 만 변경하는 단일 CSS 스타일을 작성할 수 있습니까?

코드의 간단한 예 :

 <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);}

답변

이제 사용자 지정 속성으로 가능합니다.

.brown { --rgb: 118, 76, 41; }
.green { --rgb: 51, 91, 11; }

a { display: block; position: relative; }
div { position: absolute; bottom: 0; background-color: rgba(var(--rgb), 0.8); }
a:hover div { background-color: rgba(var(--rgb), 1); }

이것이 어떻게 작동하는지 이해하려면 CSS 색상 변수에 불투명도를 어떻게 적용합니까?를 참조하십시오 .

사용자 지정 속성이 옵션이 아닌 경우 아래의 원래 답변을 참조하십시오.

안타깝게도 각 개별 클래스에 대해 빨간색, 녹색 및 파란색 값을 다시 지정해야합니다.

a { display: block; position: relative; }

.brown { position: absolute; bottom: 0; background-color: rgba(118, 76, 41, 0.8); }
a:hover .brown { background-color: rgba(118, 76, 41, 1); }

.green { position: absolute; bottom: 0; background-color: rgba(51, 91, 11, 0.8); }
a:hover .green { background-color: rgba(51, 91, 11, 1); }

inherit속성의 값으로 키워드 만 사용할 수 있으며 inherit여기 에서도 사용이 적절하지 않습니다.

답변

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

당신은 무언가에 대해 의사 요소를 이미 사용하고 있지 않습니다. 과
태그 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

답변

아니요, 불가능합니다.

하지만 이런 일을하고 싶다면 CSS 전처리 기를 사용해 볼 수 있습니다.

내가 볼 수 있듯이 적어도 LESS 와 Sass 는 색상을 더 또는 덜 투명하게 만들 수있는 기능을 가지고 있습니다.

답변

아니, 불가능합니다.

를 사용 rgba하려면 각 값을 함께 설정해야합니다. 알파 만 변경할 수있는 방법은 없습니다.

답변

이제 2017 년이고 이제는

CSS 사용자 정의 속성 / CSS 변수 ( Caniuse )

CSS 변수의 고전적인 사용 사례 중 하나는 속성 값의 일부를 개별화하는 기능입니다.

따라서 여기에서 전체 rgba 표현식을 다시 한 번 반복하는 대신 rgba값을 두 부분 / 변수로 분할하거나 ‘개별화’합니다 (하나는 rgb 값용이고 다른 하나는 알파 용).

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

그런 다음 마우스 오버시 –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>

스 니펫 확장

Codepen

추가 읽기 :

CSS 변수로 CSS 속성 개별화 (Dan Wilson)

답변

대안이 있습니다. 원래 색상에 선형 그라데이션 배경 이미지를 추가 할 수 있습니다.

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
}

또한 css3 필터 속성을 사용하면 그렇게 할 수 있지만 텍스트 색상이 변경되는 것 같습니다.

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

여기 jsfiddle이 있습니다 : https://jsfiddle.net/zhangyu911013/epwyL296/2/

답변

간단한 솔루션 :

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);
     }
   }
}

예 : https://jsfiddle.net/epwyL296/14/

배경의 알파로 재생합니다. 어둠 대신 빛을 원한다면 # 000을 #fff로 바꾸십시오.

답변

답변

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