Можно ли изменить только альфа цвета фона rgba при наведении?


101

У меня есть набор <a>тегов с разными цветами фона rgba, но с одинаковым альфа-каналом. Можно ли написать единственный стиль css, который изменит только непрозрачность атрибута rgba?

Быстрый пример кода:

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

Кстати, что ваши divэлементы делают в ваших aэлементах?
BoltClock


@mercator: Хорошо. Я пропустил это.
BoltClock

@BoltClock Казалось, самый простой способ закодировать эффект: один aтег вместо одного вокруг imgтекста, а другой вокруг текста. Тот факт, что он поддерживается HTML 5, является приятным бонусом.
Fireflight

Когда был задан этот вопрос - с CSS это было невозможно. Теперь это возможно - с помощью переменных CSS - как я показал в своем собственном ответе
Даниилд

Ответы:


52

Теперь это возможно с помощью настраиваемых свойств:

.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здесь неуместно.


15

Вы можете делать разные вещи, чтобы избежать жесткого кодирования чисел, если хотите. Некоторые из этих методов работают, только если вы используете простой белый фон, поскольку они действительно добавляют белый цвет поверх, а не уменьшают непрозрачность. Первый должен работать нормально для всего предоставленного:

  • вы еще не используете псевдоэлемент для чего-то; и
  • вы можете установить 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


Хороший ответ, спасибо. Я нашел третий вариант полезным и более простым, если бы я изменил этот метод: не использовать ничего дополнительного без наведения, а при наведении используйте: box-shadow: inset 0 0 0 99999px rgba (128,128,128,0.2). Это было необходимо для меня, потому что мои строки чередуются белым и светло-серым, поэтому исходный ответ не изменил белый цвет.
Довев Хефец

12

Нет, это невозможно.

Однако вы можете попробовать препроцессор CSS , если хотите делать такие вещи.

Из того, что я мог видеть, по крайней мере, LESS и Sass имеют функции, которые могут сделать цвета более или менее прозрачными.


1
Я всегда забываю о SCSS / LESS. Всегда. Может, мне действительно нужно начать их использовать.
BoltClock

В SCSS это прозрачность ([цвет], 0,8). См. Sass-lang.com/documentation/Sass/Script/…
Ариан Акоста,

6

Нет, это невозможно.

Если вы хотите использовать rgba, вы должны установить каждое значение вместе. Невозможно изменить только альфу.


5

Сейчас 2017 год, и теперь это возможно с

Пользовательские свойства CSS / переменные CSS ( Caniuse )

Один из классических вариантов использования переменных CSS - это возможность индивидуализировать части значения свойства.

Итак, здесь вместо того, чтобы повторять все выражение rgba еще раз - мы разделяем или "индивидуализируем" rgbaзначения на 2 части / переменные (одна для значения 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;
}

Codepen

Дальнейшее чтение:

Индивидуализация свойств CSS с помощью переменных CSS (Дэн Уилсон)


3

есть альтернатива, вы можете добавить фоновое изображение с линейным градиентом к исходному цвету.

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/


пока единственный удовлетворительный ответ для меня.
Андре Эльрико

3

простое решение:

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


2

Почему бы не использовать :hoverи не указать другую непрозрачность в классе зависания?

a:hover {
     opacity:0.6
}

13
Потому что это влияет на весь элемент.
BoltClock

3
с объектами SVG можно использоватьfill-opacity
Апрель

1
не только весь элемент, но и все дочерние элементы.
Даниэль Ф

2

У меня была похожая проблема. У меня было 18 разных div, работающих как кнопки, и каждый был разного цвета. Вместо того, чтобы выяснять цветовые коды для каждого или использовать селектор div: hover для изменения непрозрачности (что влияет на всех дочерних элементов), я использовал псевдокласс: раньше, как в ответе @Chris Boon.

Поскольку я хотел раскрасить отдельные элементы, я использовал: before, чтобы создать прозрачный белый div на: hover. Это очень простая промывка.

#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 )


2

Вы можете сделать это с помощью переменных CSS, хотя это немного беспорядочно.

Сначала установите переменную, содержащую только значения RGB в порядке цвета, который вы хотите использовать:

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

Затем вы можете назначить значение RGBA для цвета и извлечь из этой переменной все, кроме альфа-значения:

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

Это не очень красиво, но позволяет использовать одни и те же значения RGB, но разные альфа-значения для цвета.


1
Это разумное решение проблемы. И переменная с цветом не обязательно должна быть включена :root, она может быть в классе элемента, устанавливая его базовый цвет. Спасибо!
Брэд

1

Обновление: к сожалению, это невозможно. Вам нужно будет написать два отдельных селектора:


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

Согласно W3C, rgbaсвойство не имеет / не поддерживает inheritзначение.


Проблема в том, что inheritэто недопустимый аргумент функции. Вы заметите, что это не работает ни с одной другой функцией CSS.
BoltClock

Под функцией вы подразумеваете такие вещи, как rgbaи transitions? Потому что я знаю, что он поддерживается довольно многими свойствами.
ayyp 05

Ага, вместе с url()и attr()т. Д. Тоже. inheritэто только стоимость собственности.
BoltClock

Я уже знал о url()переходах. Я просто не был уверен на 100%, rgbaпотому что он используется для цветов. Спасибо, что просветили меня :)!
ayyp 05

1

Столкнулся с похожей проблемой. Вот что я сделал, и он отлично работает ( only alpha changes on hover and also the text is not affected), выполнив следующие действия:

1) Примените выделенный (или любой по вашему выбору) класс к любому элементу, для которого вы хотите изменить альфа фона.

2) Получить цвет фона rgba

3) Сохраните его в строке и манипулируйте им (измените альфа), как хотите, при наведении курсора (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);}

Код 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');

Рабочий скрипт: http://jsfiddle.net/HGHT6/1/


0

Простой обходной путь, 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;
}

-5

Это самый простой способ; поместите это в свою таблицу стилей css:

a:hover { color : #c00; } 

сделано!


- просто сопоставьте цвет с чем-нибудь близким. непрозрачность работает не во всех браузерах.
доктор null

В вашем ответе есть хороший трюк, но ваш комментарий совершенно неуместен.
BoltClock
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.