假设一个元素处于100%饱和度,不透明度等等...... 当它悬停时,我怎样才能让它的背景变得更轻？
用例是我允许用户将鼠标悬停在页面上的任何元素上.我不想四处测定相当于80%不透明度的每种颜色.
一种方法是改变opacity: 0.4但我只希望改变背景.
假设我有#404040颜色代码.如何生成更亮或更暗20%(或给定x%)的新颜色代码？我需要这个来在动态网站中生成悬停颜色(使用主题颜色正在变化).因此,无法使用其他类或:使用预定义类悬停.
谢谢
我随机地将颜色生成盒子,50x50px当我将它们悬停时,我希望它们变得更暗,但保持相同的颜色.
我尝试过li:hover用透明度设置为深色
background-color: rgba(91, 91, 91, 0.51) !important;
但它看起来不太好,它使整个<li>(我指的是盒子)在悬停时变得透明.
我该如何实现这一目标？
我有两个div,一个是.father,另一个是.child - 如下:
<div class="father">
<p></p>
</div>
<div class="child">
<p></p>
</div>
正如你所看到的,孩子不在父亲的内心(对不起,如果这看起来像狗,我唯一的例子就是眨眼).我想做什么; 就是当我给.father一个背景颜色时,可以说"背景颜色:#000".我希望孩子继承颜色黑色但是让它更亮/更暗......
我试图做以下事情:
.child {
background-color: -20%;
}
我不知道这是否是一种真实的方式,我想这是愚蠢的 - 但我需要分享我的所作所为.我也尝试使用CSS透明度,但这将应用于整个div ...如果div里面有文字怎么办？
因此,例如,我将div .child与另一个div包装在一起,并将该div设为黑色背景,然后将透明度应用于div .child - 但这也将对文本应用透明度!
如果我在周围添加了一个如何使该span继承其中div的颜色？并继承其大小.
有什么方法可以使用 只调整特定值hsl？例如，如果我只想改变饱和度或亮度并保持色调相同？
.red {
background-color: #ff0000; /* or, hsl(0,100%,50%); */
}
.red-dark { // Adjust saturation +10% and lightness -15%
background-color: hsl(, +10%, -15%);
}