我想改变形象的背景颜色上徘徊

Question

这里是我的Fiddle：

.member-img img { 
    border-radius: 50%; 
    width: 60%; 
    margin: 0 auto; 

} 
.member-img:hover img { 
    background-color: rgba(71, 161, 215, 0.5); 
} 

我不明白为什么这是行不通的。

我想改变形象的背景颜色上徘徊

这将是最好保持HTML喜欢它是因为它是一个WordPress的项目的一部分。

。

更新： 感谢所有的帮助，但没有一个解决方案是我真正需要的。

无论如何，因为它不能将图像悬停在图像上，是否可以创建另一个可以在圆形图像顶端保留完整图像并且具有透明色背景的div？

Answer 1

我的解决方案是在该图像的顶部创建另一个具有透明背景色的div。

.hover { 
    border-radius: 50%; /* same rounded shape */ 
    width: 210px; /* with the same with and height */ 
    height: 210px; 
    display: none; /* we can make it display: block with js */ 
    position: absolute; 
    top: -210px; /* position it exactly on the top of the image */ 
    right: 0; 
    bottom: 0; 
    left: 0; 
    margin: auto; 
    color: #fff; 
    background-color: rgba(71, 161, 215, 0.3); 
} 

Answer 2

如果你指的是图像的背景，这是div的图像是，则：

 .member-img:hover { 
     background-color: rgba(71, 161, 215, 0.5); 
    } 

将是答案。

Answer 3

我需要帮助，使图像更改背景颜色只有悬停。

更新回答

有两种方法可以做到这一点。

1-使用具有透明背景的图像。

当使用具有透明背景的图像时，做你正在做的事情是相对简单的。

运行下面的代码片段来测试它。

.member-img img { 
 
width: 60%; 
 
margin: 0 auto; 
 
    
 
} 
 

 
.member-img img:hover { 
 
    background-color: rgba(71, 161, 215, 0.5); 
 
}

<div class="member"> 
 
    <div class="member-img"> 
 
    <img src="https://i.stack.imgur.com/9C8Xu.png" alt="" > 
 
    </div> 
 
</div> 
 
      

2-使用图像与非透明背景

当使用非透明背景的图像，则不能在技术上改变背景颜色的图像，但您可以更改放置图像的容器的背景颜色。如果您将图像放入容器中，并将其设置为不透明，则会产生改变图像背景颜色的效果。

当使用具有不透明背景的图像时，请执行以下步骤。

1.设置图像的opacity，以便它对某些 范围透明。

2.将您的图像放入容器中，例如div。

将容器div的width和height。

4.现在使你的形象适合容器，你需要图像的width 设置为100%并设置max-height到100%。

5.然后设置使用:hover您的容器div，并设置到任何你想要的 background-color。

运行以下代码片段对其进行测试。

.member-img img { 
 
border-radius: 50%; 
 
background-color: #ffffff; 
 
opacity: 0.3; 
 
filter: alpha(opacity=60); 
 
width:100%; 
 
max-height: 100%; 
 
object-fit: contain; 
 
} 
 

 
.member-img{ 
 
    width: 390px; 
 
    height: 390px; 
 
    border-radius: 50%; 
 
} 
 
.member-img:hover { 
 
    background-color: rgba(71, 161, 215, 0.5); 
 
}

<div class="member"> 
 
    <div class="member-img"> 
 
    <img src="https://dummyimage.com/300" alt="image">  
 
    </div> 
 
</div>

Answer 4

你不能这样做，对于IMG，但你可以这样做： -

.member-img { 
 
     border-radius: 50%; 
 
     width: 300px; 
 
     height: 300px; 
 
     display: block; 
 
     margin: 0 auto; 
 
     background: url('https://dummyimage.com/300') center center no-repeat; 
 
     
 
    } 
 
    .member-img:hover { 
 
     background: rgba(71, 161, 215, 0.5); 
 
    }

<div class="member"> 
 
     <div class="member-img"> 
 
      <!--img src="https://dummyimage.com/300" alt="" --> 
 
     </div> 
 
    </div>

Answer 5

您的样品图像没有透明背景，如果您使用像Google徽标一样的透明图片，则可以按照您希望悬停的方式运行：

.member-img img { 
 
    border-radius: 50%; 
 
    width: 60%; 
 
    margin: 0 auto; 
 
    /*background-color: red; */ /*just for test */ 
 
} 
 
.member-img:hover img { 
 
    background-color: rgba(71, 161, 215, 0.5); 
 
}

<div class="member"> 
 
    <div class="member-img"> 
 
     <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" alt="" > 
 
    </div> 
 
</div>

Answer 6

我无法完成肯定你到底想要什么。如果你想改变盘旋在它时颜色的背景下，试试这个在你的CSS：

img { 
    border-radius: 50%; 
    width: 40%; 
    margin: 0 auto; 
    display: block; 
} 

.member-img:hover { background: rgba(71, 161, 215, 0.5);} 

Answer 7

你想是这样的： -

.member-img img { 
 
    border-radius: 50%; 
 
    width: 60%; 
 
    margin: 0 auto; 
 
    
 
} 
 
.member-img:hover{ 
 
    background-color: rgba(71, 161, 215, 0.5); 
 
    opacity: 0.3; 
 
}

<div class="member"> 
 
    <div class="member-img"> 
 
     <img src="https://dummyimage.com/300" alt="" > 
 
    </div> 
 
</div>

或

.member-img img { 
 
    border-radius: 50%; 
 
    width: 60%; 
 
    margin: 0 auto; 
 
    
 
} 
 
.member-img:hover{ 
 
    background-color: rgba(71, 161, 215, 0.5); 
 
}

<div class="member"> 
 
    <div class="member-img"> 
 
     <img src="https://dummyimage.com/300" alt="" > 
 
    </div> 
 
</div>

Answer 8

您不能更改图像的背景颜色，但可以使用css filters。过滤器会使图像产生一些效果，如模糊，饱和。