Pertanyaan Apakah mungkin untuk mengubah hanya alfa dari warna latar belakang rgba di hover?


Saya punya satu set <a> tag dengan warna latar rgba yang berbeda tetapi alpha yang sama. Apakah mungkin untuk menulis gaya css tunggal yang akan mengubah hanya opacity dari atribut rgba?

Contoh cepat dari kode:

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

Dan gaya

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

Apa yang saya ingin lakukan adalah menulis satu gaya yang akan mengubah opacity ketika <a> melayang di atas, namun tetap warna tidak berubah.

Sesuatu seperti

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

76
2017-08-05 20:45


asal


Jawaban:


Ini sekarang dimungkinkan dengan properti khusus:

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

Untuk memahami cara kerjanya, lihat Bagaimana cara menerapkan opasitas ke variabel warna CSS?

Jika properti khusus bukan merupakan opsi, lihat jawaban asli di bawah ini.


Sayangnya, tidak, Anda harus menentukan nilai merah, hijau, dan biru lagi untuk setiap kelas:

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

Anda hanya bisa menggunakan inherit kata kunci saja sebagai nilai untuk properti, dan bahkan kemudian penggunaan inherit tidak pantas di sini.


36
2017-08-05 20:52



Tidak, itu tidak mungkin.

Anda bisa mencoba Pra-prosesor CSS, meskipun, jika Anda ingin melakukan hal semacam ini.

Dari apa yang bisa saya lihat, setidaknya KURANG dan Kelancangan memiliki fungsi yang dapat membuat warna lebih, atau kurang, transparan.


12
2017-08-05 21:03



Anda dapat melakukan berbagai hal untuk menghindari kode keras angka jika Anda mau. Beberapa metode ini hanya berfungsi jika Anda menggunakan latar belakang putih polos karena mereka benar-benar menambahkan warna putih di atas daripada mengurangi opasitas. Yang pertama harus berfungsi dengan baik untuk semua yang disediakan:

  • Anda belum menggunakan elemen psuedo untuk sesuatu; dan
  • Anda dapat mengatur position relatif atau absolut pada <div> menandai

Pilihan 1: ::before elemen psuedo:

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

Opsi 2: gif overlay putih:

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

Opsi 3: box-shadow metode:

Variasi dari metode gif, tetapi mungkin memiliki masalah kinerja.

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

Contoh CodePen: http://codepen.io/chrisboon27/pen/ACdka


10
2018-06-04 05:05



Tidak, itu tidak mungkin.

Jika ingin digunakan rgba, Anda harus mengatur setiap nilai bersama. Tidak ada cara untuk hanya mengubah alpha.


5
2017-08-05 20:52



Sekarang 2017 dan ini sekarang mungkin dengan

Properti khusus CSS / Variabel CSS (Caniuse)

Satu kasus penggunaan klasik untuk variabel CSS adalah kemampuan untuk mengindividualisasi bagian dari nilai properti.

Jadi di sini, daripada mengulangi seluruh ekspresi rgba sekali lagi - kita berpisah atau 'individulaize' rgba nilai menjadi 2 bagian / variabel (satu untuk nilai rgb dan satu untuk alfa)

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

Kemudian, pada saat kita dapat memodifikasi variabel --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

Bacaan lebih lanjut:

Individualisasi Properti CSS dengan Variabel CSS (Dan Wilson)


5
2017-08-02 14:25



Mengapa tidak digunakan :hover dan tentukan opasitas yang berbeda di kelas hover?

a:hover {
     opacity:0.6
}

2
2017-08-05 20:51



Saya memiliki masalah serupa. Saya memiliki 18 div berbeda yang berfungsi sebagai tombol, dan masing-masing dengan warna yang berbeda. Daripada mencari tahu kode warna untuk masing-masing atau menggunakan div: hover selector untuk mengubah opacity (yang mempengaruhi semua anak) saya menggunakan pseudo-class: sebelum seperti di jawaban @Chris Boon.

Karena saya ingin melakukan pewarnaan pada elemen individual, saya menggunakan: sebelumnya untuk membuat div putih transparan pada: hover. Ini adalah pencucian yang sangat mendasar.

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

Menurut CanIUse.com, ini seharusnya memiliki sesuatu seperti 92% dukungan pada awal 2014. (http://caniuse.com/#feat=css-gencontent)


2
2018-01-31 17:09



Anda dapat melakukannya dengan variabel CSS, meskipun sedikit berantakan.

Pertama, atur variabel yang mengandung hanya nilai RGB, dalam urutan, dari warna yang ingin Anda gunakan:

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

Kemudian Anda dapat menetapkan nilai RGBA untuk warna dan menarik semuanya kecuali nilai alfa dari variabel ini:

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

Ini tidak super cantik, tetapi memungkinkan Anda menggunakan nilai RGB yang sama tetapi nilai alfa yang berbeda untuk warna.


2
2018-05-05 13:15