为什么悬停不起作用。CSS RGBA 不工作

Question

为什么 rgba hover 不起作用？这是我的代码

.img {
width: 100%;
height: 250px;
background: url(http://cos.jpg) no-repeat;
background-size: cover;
margin-bottom: 20px;

不工作 rgba

.image:hover{
background-color: rgba(251, 181, 59, 0.5);

Answer 1

可能是你没有正确关闭图像样式。检查你的代码一次。同时试试我的例子，这里的图像悬停效果很好，我只是给了一些边框以便更好地理解，这可能会对你有所帮助。

<!DOCTYPE html>
<html>
<head>
<style> 
.main{
padding:20px;
margin:20px;
}
.img {
width: 200px;
height: 200px;
background: url("https://www.w3schools.com/cssref/img_tree.gif") no-repeat;
padding:20px;
margin:20px;
}
.img:hover{
background-color: rgba(255, 255, 0, 0.9);
border:5px solid green;
}
</style>
<body>
<div class="main">
 <div class="img"></div>
</div>
</body>
</html>

为什么悬停不起作用。CSS RGBA 不工作

why hover doesn't work .CSS RGBA NOT WORKING

css

hover

opacity

rgba