마우스 오버시 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로 바꾸십시오.

:hoverhover 클래스에서 다른 불투명도를 사용 하고 지정 하지 않는 이유는 무엇 입니까?

a:hover {
     opacity:0.6
}

비슷한 문제가있었습니다. 18 개의 다른 div가 버튼으로 작동하고 각각 다른 색상을 사용했습니다. 각각의 색상 코드를 알아 내거나 div : hover 선택기를 사용하여 불투명도를 변경하는 대신 (모든 어린이에게 영향을 미침) 나는 @Chris Boon의 대답과 같이 의사 클래스를 사용했습니다.

개별 요소에 색상을 지정하고 싶었 기 때문에 : hover에 투명한 흰색 div를 만들기 전에 :을 사용했습니다. 이것은 매우 기본적인 유실입니다.

#categories div {
    position:relative;
    width:100px;
    height:100px;
    float:left;
    border:1px solid black;
    display:table-cell;
}

#categories div:before{
    content:"";
    position:absolute;
    top:0px;
    left:0px;
    width:100px;
    height:100px;
}

#categories div:hover:before {
    background-color:white;
    opacity:0.2;
}

#a_Particular_Div {
    background-color:red;
}

CanIUse.com에 따르면 2014 년 초 기준으로 92 %의 지원을받을 것입니다. ( http://caniuse.com/#feat=css-gencontent )

약간 지저분하지만 CSS 변수로이 작업을 수행 할 수 있습니다.

첫째, 포함하는 변수 설정 단지 색상의 사용하려는 순서대로 RGB 값을 :

:root {
  --color-success-rgb: 80, 184, 60; 
}

그런 다음 색상에 RGBA 값을 할당하고이 변수에서 알파 값을 제외한 모든 것을 가져올 수 있습니다.

.button--success {
  background: rgba(var(--color-success-rgb), 0.8);
}

이것은 매우 예쁘지는 않지만 동일한 RGB 값을 사용하지만 색상에 대해 다른 알파 값을 사용할 수 있습니다.

업데이트 : 불행히도 그렇게 할 수 없습니다. 다음과 같은 두 개의 개별 선택자를 작성해야합니다.

a.green:hover {background-color: rgba(118,76,41,1);}
a.brown:hover {background-color: rgba(118,76,41,1);}

W3C에 따르면 rgba속성에는 inherit값 이 없거나 지원하지 않습니다 .

비슷한 문제에 직면했습니다. 다음은 내가 한 일이며 only alpha changes on hover and also the text is not affected다음 단계에 따라 잘 작동합니다 ( ).

1) 배경 알파를 변경하려는 요소에 강조 표시된 (또는 선택한) 클래스를 적용합니다.

2) 배경색 rgba 가져 오기

3) hover (mouseenter 및 mouseleave)에서 원하는대로 문자열에 저장하고 조작 (알파 변경)

HTML 코드 :

<div class="highlighted brown">Link 1</div><br><br>
<div class="highlighted green">Link 1</div>

CSS 코드 :

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

자바 스크립트 코드 :

$(document).on({

            mouseenter: function() {

            var rgba_str = $(this).css("background-color");
            var new_rgba_str ="rgba(" + rgba_str.substring(rgba_str.lastIndexOf("(")+1,rgba_str.lastIndexOf(",")) + ", 0.5)";   

                $(this).css("background-color",new_rgba_str ); 
               },

             mouseleave: function(){

                 var rgba_str = $(this).css("background-color");

            var new_rgba_str ="rgba(" + rgba_str.substring(rgba_str.lastIndexOf("(")+1,rgba_str.lastIndexOf(",")) + ", 0.8)";               
                $(this).css("background-color",new_rgba_str ); 

               }

        },'.highlighted');

작업 바이올린 : http://jsfiddle.net/HGHT6/1/

opacity다음에서 약간의 변경 사항을 수용 할 수 있는 경우 간단한 해결 방법 background-color:

.yourClass {
    // Your style here //
    opacity: 0.9;
}

.yourClass:hover, .yourClass:focus {
    opacity: 0.7;
}

.yourClass:active {
    opacity: 1;
    box-shadow: none;
}

.yourClass:hover, .yourClass:focus, .yourClass:active {
    text-decoration: none;
    outline: none;
}

이것은 가장 간단한 방법입니다. 이것을 CSS 스타일 시트에 넣으십시오.

a:hover { color : #c00; } 

끝난!