Có thể chỉ thay đổi alpha của màu nền rgba khi di chuột không?

Tôi có một bộ <a> thẻ với các màu nền rgba khác nhau nhưng cùng một alpha. Có thể viết một kiểu css duy nhất sẽ chỉ thay đổi độ mờ của thuộc tính rgba không?

Một ví dụ nhanh về mã:

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

Và các phong cách

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

Những gì tôi muốn làm là viết một kiểu duy nhất sẽ thay đổi độ mờ khi di chuột <a>qua, nhưng vẫn giữ nguyên màu sắc.

Cái gì đó như

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

Điều này hiện có thể thực hiện được với các thuộc tính tùy chỉnh:

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

Để hiểu cách hoạt động của điều này, hãy xem Làm cách nào để áp dụng độ mờ cho biến màu CSS?

Nếu thuộc tính tùy chỉnh không phải là một tùy chọn, hãy xem câu trả lời ban đầu bên dưới.

Rất tiếc, không, bạn sẽ phải chỉ định lại các giá trị đỏ, lục và lam cho từng lớp riêng lẻ:

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

Bạn chỉ có thể sử dụng inherittừ khóa một mình làm giá trị cho thuộc tính và ngay cả khi việc sử dụng từ khóa inheritkhông thích hợp ở đây.

Bạn có thể làm nhiều việc khác nhau để tránh phải viết mã các số nếu bạn muốn. Một số phương pháp này chỉ hoạt động nếu bạn sử dụng nền trắng đơn giản vì chúng thực sự thêm màu trắng lên trên thay vì giảm độ mờ. Cái đầu tiên sẽ hoạt động tốt cho mọi thứ được cung cấp:

• bạn chưa sử dụng phần tử psuedo cho một thứ gì đó; và
• bạn có thể đặt positionthành tương đối hoặc tuyệt đối trên <div>thẻ

Tùy chọn 1: ::beforepsuedo-element:

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

Tùy chọn 2: lớp phủ gif trắng:

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

Tùy chọn 3: box-shadowphương pháp:

Một biến thể của phương thức gif, nhưng có thể có vấn đề về hiệu suất.

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

Ví dụ về CodePen: http://codepen.io/chrisboon27/pen/ACdka

Không, không thể.

Tuy nhiên, bạn có thể thử một bộ xử lý trước CSS nếu bạn muốn làm điều này.

Từ những gì tôi có thể thấy, ít nhất LESS và Sass có các chức năng có thể làm cho màu sắc trở nên trong suốt hơn hoặc ít hơn.

Không, điều đó là không thể.

Nếu muốn sử dụng rgba, bạn phải đặt từng giá trị với nhau. Không có cách nào để chỉ thay đổi alpha.

Bây giờ là năm 2017 và điều này hiện có thể với

Thuộc tính tùy chỉnh CSS / Biến CSS ( Caniuse )

Một trường hợp sử dụng cổ điển cho các biến CSS là khả năng cá nhân hóa các phần của giá trị thuộc tính.

Vì vậy, ở đây, thay vì lặp lại toàn bộ biểu thức rgba một lần nữa - chúng tôi tách hoặc 'tách riêng' các rgbagiá trị thành 2 phần / biến (một cho giá trị rgb và một cho alpha)

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

Sau đó, khi di chuột, bây giờ chúng ta có thể chỉ cần sửa đổi biến --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

Đọc thêm:

Cá nhân hóa các thuộc tính CSS bằng các biến CSS (Dan Wilson)

có một giải pháp thay thế, bạn có thể thêm hình nền gradient tuyến tính vào màu gốc.

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
}

Ngoài ra, với thuộc tính bộ lọc css3, bạn cũng có thể làm điều đó, nhưng có vẻ như nó sẽ thay đổi màu văn bản

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

đây là jsfiddle: https://jsfiddle.net/zhangyu911013/epwyL296/2/

giải pháp đơn giản:

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

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

chỉ chơi với alpha của nền. nếu bạn muốn ánh sáng thay vì bóng tối, chỉ cần thay thế # 000 bằng #fff

Tại sao không sử dụng :hovervà chỉ định một độ mờ khác trong lớp di chuột?

a:hover {
     opacity:0.6
}

Tôi đã có một vấn đề tương tự. Tôi có 18 div khác nhau hoạt động như các nút, và mỗi div có một màu khác nhau. Thay vì tìm ra mã màu cho từng hoặc sử dụng bộ chọn div: hover để thay đổi độ mờ (ảnh hưởng đến tất cả trẻ em), tôi đã sử dụng lớp giả: trước đây giống như trong câu trả lời của @Chris Boon.

Bởi vì tôi muốn tô màu trên các phần tử riêng lẻ, tôi đã sử dụng: before để tạo một div màu trắng trong suốt trên: hover. Đây là một sự rửa trôi rất cơ bản.

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

Theo CanIUse.com, điều này sẽ có được 92% hỗ trợ vào đầu năm 2014. ( http://caniuse.com/#feat=css-gencontent )

Bạn có thể làm điều này với các biến CSS, mặc dù nó hơi lộn xộn.

Đầu tiên, hãy đặt một biến chỉ chứa các giá trị RGB theo thứ tự của màu bạn muốn sử dụng:

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

Sau đó, bạn có thể gán giá trị RGBA cho một màu và kéo mọi thứ trừ giá trị alpha từ biến này:

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

Điều này không quá đẹp, nhưng nó cho phép bạn sử dụng các giá trị RGB giống nhau nhưng các giá trị alpha khác nhau cho một màu.

Cập nhật: Rất tiếc là không thể thực hiện được. Bạn sẽ cần viết hai bộ chọn riêng biệt của:

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

Theo W3C, thuộc rgbatính không có / hỗ trợ inheritgiá trị.

Tôi phải đối mặt với một vấn đề tương tự. Đây là những gì tôi đã làm và nó hoạt động tốt ( only alpha changes on hover and also the text is not affected) theo các bước sau:

1) Áp dụng một lớp được đánh dấu (hoặc bất kỳ lựa chọn nào của bạn) cho bất kỳ phần tử nào bạn muốn thay đổi alpha nền.

2) Lấy màu nền rgba

3) Lưu trữ nó trong một chuỗi và thao tác với nó (thay đổi alpha) như bạn muốn khi di chuột (mouseenter và mouseleave)

Mã HTML:

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

Mã CSS:

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

Mã Javascript:

$(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');

Làm việc Fiddle: http://jsfiddle.net/HGHT6/1/

Cách giải quyết đơn giản với opacitynếu bạn có thể đáp ứng một thay đổi nhỏ trong 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;
}

Đây là cách đơn giản nhất; đặt cái này vào bảng định kiểu css của bạn:

a:hover { color : #c00; } 

làm xong!