Можно ли изменить только альфа цвета фона RGBA при наведении курсора? - PullRequest
Новая
       47

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

88 голосов
/ 06 августа 2011

У меня есть набор <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);}

Ответы [ 14 ]

43 голосов
/ 06 августа 2011

Теперь это возможно с пользовательскими свойствами: 

.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 здесь не подходит.

13 голосов
/ 04 июня 2013

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

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

12 голосов
/ 06 августа 2011

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

Вы можете попробовать препроцессор CSS , хотя, если вы хотите сделать что-то подобное.

Из чегоЯ мог видеть, по крайней мере, МЕНЬШЕ и Sass имеют функции, которые могут сделать цвета более или менее прозрачными.

6 голосов
/ 06 августа 2011

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

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

5 голосов
/ 02 августа 2017

Сейчас 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;
}


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

Дополнительная информация:

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

2 голосов
/ 13 июня 2017

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

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/

2 голосов
/ 05 мая 2017

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

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

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

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

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

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

2 голосов
/ 31 января 2014

У меня была похожая проблема. У меня было 18 разных дивов, работающих как кнопки, и у каждого был свой цвет. Вместо того, чтобы определять цветовые коды для каждого или использовать селектор div: hover, чтобы изменить непрозрачность (которая влияет на все дочерние элементы), я использовал псевдокласс: before, как в ответе @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, это должно иметь примерно 92% поддержки на начало 2014 года. (http://caniuse.com/#feat=css-gencontent)

2 голосов
/ 06 августа 2011

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

a:hover {
     opacity:0.6
}
1 голос
/ 08 июля 2014

Я столкнулся с подобной проблемой. Вот что я сделал, и он прекрасно работает (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/

Страница:
...