Я произвольно генерирую цвета в ящики 50x50px, и когда я нахожу их, я хочу, чтобы они стали темнее, но остались одного цвета.
Я попытался установить li:hover на темный цвет с прозрачностью
background-color: rgba(91, 91, 91, 0.51) !important;
но он выглядит не очень хорошо, что делает весь <li> (который является ящиком, о котором я говорю) прозрачным при наведении.
Как мне это достичь?
Извините, изменить альфа нельзя. Вы должны указать значения красного, зеленого и синего для каждого отдельного класса.
Но есть другой способ, на который дается ответ здесь, и я скопирую ниже: fooobar.com/info/79366/...
Вот демо: http://codepen.io/chrisboon27/pen/ACdka
Вариант 1: перед 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;
}
Вариант 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;
}