Apakah mungkin mengubah hanya alfa dari warna latar belakang rgba saat mengarahkan kursor?

100

Saya memiliki sekumpulan <a>tag dengan warna latar belakang rgba yang berbeda tetapi alfa yang sama. Apakah mungkin untuk menulis satu gaya css yang hanya akan mengubah opasitas atribut rgba?

Contoh singkat kode:

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

Dan gayanya

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 ingin saya lakukan adalah menulis satu gaya yang akan mengubah opasitas saat di <a>-arahkan, namun warnanya tidak berubah.

Sesuatu seperti

a:hover .green, a:hover .brown {background-color: rgba(inherit,inherit,inherit,1);}
Fireflight
sumber
Ngomong-ngomong, apa yang divdilakukan aelemen Anda di elemen Anda ?
BoltClock
@mercator: Baiklah. Saya melewatkan itu.
BoltClock
@BoltClock Tampaknya cara termudah untuk mengkodekan efek, satu atag sebagai lawan satu di sekitar imgdan lainnya di sekitar teks. Fakta bahwa itu didukung oleh HTML 5 adalah bonus yang bagus.
Fireflight
Ketika pertanyaan ini diajukan - ini tidak mungkin dilakukan dengan CSS. Sekarang ini mungkin - dengan Variabel CSS - seperti yang saya tunjukkan dalam jawaban saya sendiri
Danield

Jawaban:

51

Ini sekarang dapat dilakukan 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 kustom bukan merupakan pilihan, 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 dapat menggunakan inheritkata kunci saja sebagai nilai properti, dan meskipun demikian penggunaan dari inherittidak sesuai di sini.

BoltClock
sumber
15

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

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

Opsi 1: ::beforeelemen 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: hamparan gif 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-shadowMetode:

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

Chris Boon
sumber
Jawaban bagus, terima kasih. Saya menemukan opsi ketiga berguna dan lebih sederhana jika saya membalikkan metode ini: jangan gunakan tambahan apa pun tanpa hover, dan pada hover use: box-shadow: inset 0 0 0 99999px rgba (128,128,128,0.2). Ini perlu bagi saya karena baris saya bergantian putih dan abu-abu muda, jadi jawaban asli tidak mengubah putih.
Dovev Hefetz
12

Tidak, itu tidak mungkin.

Anda dapat mencoba pra-prosesor CSS , jika Anda ingin melakukan hal semacam ini.

Dari apa yang saya lihat, setidaknya LESS dan Sass memiliki fungsi yang dapat membuat warna lebih, atau kurang, transparan.

mercator
sumber
1
Saya selalu lupa tentang SCSS / LESS. Selalu. Mungkin saya perlu mulai menggunakannya.
BoltClock
Dalam SCSS, ini ditransparankan ([color], 0.8). Lihat sass-lang.com/documentation/Sass/Script/…
Arian Acosta
6

Tidak, itu tidak mungkin.

Jika Anda ingin menggunakan rgba, Anda harus mengatur setiap nilai bersama-sama. Tidak ada cara untuk hanya mengubah alfa.

tigapuluhdot
sumber
5

Sekarang tahun 2017 dan sekarang mungkin dengan

Properti khusus CSS / Variabel CSS ( Caniuse )

Salah satu kasus penggunaan klasik untuk variabel CSS adalah kemampuan untuk mengindividualisasikan bagian nilai properti.

Jadi di sini, alih-alih mengulangi seluruh ekspresi rgba sekali lagi - kami membagi atau 'memisahkan' rgbanilai 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 hover kita sekarang dapat memodifikasi variabel --alpha:

a:hover .green, a:hover .brown {
  --alpha: 1;
}

Codepen

Bacaan lebih lanjut:

Mempersonalisasi Properti CSS dengan Variabel CSS (Dan Wilson)

Danield
sumber
3

ada alternatif, Anda dapat menambahkan gambar latar belakang gradien linier ke warna asli.

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
}

Selain itu, dengan properti css3 filter, Anda juga dapat melakukannya, tetapi tampaknya itu akan mengubah warna teks

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

berikut adalah jsfiddle: https://jsfiddle.net/zhangyu911013/epwyL296/2/

Yu Zhang
sumber
sejauh ini satu-satunya jawaban yang memuaskan bagiku.
Andre Elrico
3

solusi sederhana:

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

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

mainkan saja dengan alfa latar belakang. jika Anda menginginkan terang, bukan kegelapan, ganti # 000 dengan #fff

Matriks
sumber
2

Mengapa tidak menggunakan :hoverdan menentukan opasitas yang berbeda di kelas hover?

a:hover {
     opacity:0.6
}
Diodeus - James MacFarlane
sumber
13
Karena itu mempengaruhi keseluruhan elemen.
BoltClock
3
dengan objek SVG, dimungkinkan untuk digunakanfill-opacity
Aprillion
1
tidak hanya seluruh elemen, tetapi semua elemen anak juga.
Daniel F
2

Saya memiliki masalah serupa. Saya memiliki 18 div berbeda yang berfungsi sebagai tombol, dan masing-masing memiliki warna 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: before seperti dalam jawaban @Chris Boon.

Karena saya ingin melakukan pewarnaan pada masing-masing elemen, saya menggunakan: before 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 sekitar 92% dukungan pada awal 2014. ( http://caniuse.com/#feat=css-gencontent )

Josiah
sumber
2

Anda dapat melakukan ini dengan variabel CSS, meskipun sedikit berantakan.

Pertama, tetapkan variabel yang hanya berisi nilai RGB, secara berurutan, 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 ini memungkinkan Anda menggunakan nilai RGB yang sama tetapi nilai alfa berbeda untuk suatu warna.

Adam Hollett
sumber
1
Ini adalah solusi yang masuk akal untuk masalah tersebut. Dan, variabel dengan color tidak harus on :root, bisa di kelas elemen, atur warna dasarnya. Terima kasih!
Brad
1

Pembaruan: Sayangnya tidak mungkin untuk melakukan itu. Anda harus menulis dua pemilih terpisah dari:


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

Menurut W3C, rgbaproperti tidak memiliki / mendukung inheritnilai.

ayyp
sumber
Masalahnya adalah itu inheritbukan argumen fungsi yang valid. Anda akan melihat itu tidak berfungsi dengan fungsi CSS lainnya.
BoltClock
Yang Anda maksud dengan fungsi adalah hal-hal seperti rgbadan transitions? Karena saya tahu itu didukung dengan cukup banyak properti.
ayyp
Yup, bersama url(), attr()dll juga. inheritadalah nilai properti saja.
BoltClock
Saya sudah tahu tentang url()dan transisi. Saya hanya tidak 100% yakin rgbakarena itu digunakan untuk warna. Terima kasih telah mendidik saya :)!
ayyp
1

Saya menghadapi masalah yang sama. Inilah yang saya lakukan dan berfungsi dengan baik ( only alpha changes on hover and also the text is not affected) dengan langkah-langkah berikut:

1) Terapkan kelas yang disorot (atau salah satu pilihan Anda) ke elemen mana pun yang ingin Anda ubah alfa latar belakangnya.

2) Dapatkan warna latar belakang rgba

3) Simpan dalam string dan manipulasi (ubah alfa) seperti yang Anda inginkan saat hover (mouseenter dan mouseleave)

Kode HTML:

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

Kode CSS:

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

Kode 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');

Bekerja Fiddle: http://jsfiddle.net/HGHT6/1/

Rakhi
sumber
0

Solusi sederhana dengan opacityjika Anda dapat mengakomodasi sedikit perubahan dalam 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;
}
Alfred Wallace
sumber
-5

Ini tentang cara paling sederhana; taruh ini di stylesheet css Anda:

a:hover { color : #c00; } 

selesai!

dr. batal
sumber
- cukup cocokkan warnanya dengan sesuatu yang mendekati. opacity tidak bekerja di semua browser.
dr. null
Jawaban Anda memiliki trik yang bagus, tetapi komentar Anda sama sekali tidak relevan.
BoltClock