[英]How can I change the opacity of a background colour?
Question 1 问题1
I was wondering if anyone can help me change the opacity of the drop down background colour when the user hovers over it on the nav bar? 我想知道当用户将其悬停在导航栏上时,是否有人可以帮助我更改下拉背景色的不透明度? I have tried look at other tutorials.
我试过看其他教程。 However, I have had no luck.
但是,我没有运气。
Here is my code 这是我的代码
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: #FFFFFF;
border-radius: 9px;
transition: all .2s;
}
.navbar.navbar-default ul li a:hover {
color: white;
}
Use rgba() to set your background color. 使用rgba()设置背景色。
Instead of hex, rgba takes a red, green, blue, and opacity value, like so: rgba代替了十六进制,而是采用了红色,绿色,蓝色和不透明度值,如下所示:
background-color: rgba(20, 50, 40, 0.5)
The rgb values are 0 to 255, opacity is 0 to 1. rgb值为0到255,不透明度为0到1。
You can use sites like this: http://www.colorhexa.com/4f5f4f to help you convert hex values to rgb values. 您可以使用以下网站: http : //www.colorhexa.com/4f5f4f,以帮助您将十六进制值转换为rgb值。
CSS, unfortunately, doesn't support alpha values in hex colors. 不幸的是,CSS不支持十六进制颜色的alpha值。
you can simple add below css lines 您可以简单地在css行下面添加
.navbar.navbar-default ul li a:hover {
color: white;
background: rgba(61, 63, 74, 0.8);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.