我随机地将颜色生成50×50像素的盒子,当我将它们悬停下来时,我希望它们变得更暗,但是保持相同的颜色.
我已经尝试设置li:悬停到一个深色的透明度
background-color: rgba(91,91,0.51) !important;
但它看起来不太好,它使整个< li> (这是我指的是)透明的悬停.
我该如何实现?
Here is a Plunker.
解决方法 对不起,不可能只更改Alpha.您必须为每个单独的类指定红色,绿色和蓝色值.但还有另一种方法在这里回答,我将在下面复制:
http://stackoverflow.com/a/16910152/1026017
这是一个演示:
http://codepen.io/chrisboon27/pen/ACdka
选项1::: before psuedo-element:
.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,41); Box-shadow:inset 0 0 0 99999px rgba(255,255,0.2);}.shadow_method:hover{ Box-shadow:none;}总结
以上是内存溢出为你收集整理的html – CSS – 在未知颜色的悬停上变暗全部内容,希望文章能够帮你解决html – CSS – 在未知颜色的悬停上变暗所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)