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


Tôi có một bộ <a> các thẻ 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 đơn lẻ 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à 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 phong cách duy nhất có thể thay đổi độ mờ đục khi <a> được di chuột qua, nhưng vẫn giữ nguyên màu.

Cái gì đó như

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

76
2017-08-05 20:45


gốc


Nhân tiện, bạn là ai div các yếu tố làm trong a yếu tố? - BoltClock♦
@BoltClock HTML5 cho phép chặn cấp a các yếu tố. - mercator
@mercator: Được rồi. Tôi bỏ lỡ điều đó. - BoltClock♦
@BoltClock Nó có vẻ là cách đơn giản nhất để mã hóa hiệu ứng, một a thẻ như trái ngược với một xung quanh img và một đoạn khác xung quanh văn bản. Thực tế là nó được hỗ trợ bởi HTML 5 là một phần thưởng tốt đẹp. - Fireflight
Khi câu hỏi này được hỏi - điều này là không thể với CSS. Bây giờ điều này có khả năng - với Biến CSS - như tôi đã thể hiện trong câu trả lời của riêng tôi - Danield


Các câu trả lời:


Điều này bây giờ có thể 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 thức hoạt động, 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.


Thật không may, không, bạn sẽ phải chỉ định lại các giá trị màu đỏ, xanh lục và xanh dương 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 inherit từ khóa một mình dưới dạng giá trị cho thuộc tính và thậm chí sau đó sử dụng inherit không thích hợp ở đây.


36
2017-08-05 20:52





Không, không thể.

Bạn có thể thử một Trình xử lý trước CSS, tuy nhiên, 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 ÍT HƠN và Sass có các chức năng có thể làm cho màu sắc nhiều hơn, hoặc ít hơn, trong suốt.


12
2017-08-05 21:03



Tôi luôn quên SCSS / LESS. Luôn luôn. Có lẽ tôi cần phải bắt đầu thực sự sử dụng chúng. - BoltClock♦
Trong SCSS, nó được minh bạch hóa ([màu], 0,8). Xem sass-lang.com/documentation/Sass/Script/… - Arian Acosta


Bạn có thể làm những việc khác nhau để tránh phải mã hóa cứng các con 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 trơn vì chúng thực sự thêm màu trắng trên đầu thay vì giảm độ mờ đục. Người đầu tiên nên làm việc tốt cho tất cả mọi thứ được cung cấp:

  • bạn chưa sử dụng yếu tố psuedo cho một cái gì đó; và
  • bạn có thể đặt position liên quan hoặc tuyệt đối trên <div> nhãn

Lựa chọn 1: ::before psuedo-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-shadow phương pháp:

Một biến thể của phương pháp gif, nhưng có thể có vấn đề 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


10
2018-06-04 05:05



Câu trả lời tốt, cảm ơn. Tôi thấy tùy chọn thứ ba hữu ích và đơn giản hơn nếu tôi đảo ngược phương pháp này: không sử dụng bất kỳ thứ gì bổ sung mà không cần di chuột và khi sử dụng di chuột: box-shadow: inset 0 0 0 99999px rgba (128,128,128,0.2). Điều này là cần thiết cho tôi bởi vì hàng của tôi thay thế màu trắng và màu xám nhạt, vì vậy câu trả lời ban đầu đã không thay đổi màu trắng. - Dovev Hefetz


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

Nếu bạn 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.


5
2017-08-05 20:52





Bây giờ là năm 2017 và giờ đây có thể

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ị của thuộc tính.

Ở đâ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 chia tay hoặc 'individulaize' rgba giá 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 chúng ta có thể chỉnh sửa 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 hoá các thuộc tính CSS với các biến CSS (Dan Wilson)


5
2017-08-02 14:25





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

a:hover {
     opacity:0.6
}

2
2017-08-05 20:51



Bởi vì điều đó ảnh hưởng đến toàn bộ phần tử. - BoltClock♦
chỉ nền. duh. - Diodeus - James MacFarlane
Không, nó cũng ảnh hưởng đến văn bản. - BoltClock♦
với các đối tượng SVG, có thể sử dụng fill-opacity - Aprillion
không chỉ toàn bộ yếu tố, mà là tất cả các yếu tố con. - Daniel F


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

Bởi vì tôi muốn làm màu trên các yếu tố riêng lẻ, tôi đã sử dụng: trước đây để tạo ra một div 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 cần phải có sự hỗ trợ 92% vào đầu năm 2014. (http://caniuse.com/#feat=css-gencontent)


2
2018-01-31 17:09





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 một chút.

Đầu tiên, đặt biến chứa chỉ 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 tất cả mọi thứ trừ giá trị alpha từ biến này:

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

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


2
2018-05-05 13:15



Đây là một giải pháp hợp lý cho vấn đề. Và, biến với màu sắc không phải là trên :root, nó có thể nằm trên lớp phần tử, thiết lập màu cơ sở của nó. Cảm ơn! - Brad