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，那么：

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

就是答案。

Answer 2

我需要帮助才能在悬停时使图像更改背景颜色。

更新了答案

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

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。

3。设置容器width的{{1}}和height。

4. 现在要使图片适合容器，您需要设置div 将图片设置为width并将100%设置为max-height。

5. 然后在容器100%上设置使用: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);
}

Answer 3

你无法为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 4

您的示例图片没有透明背景，如果您使用像谷歌徽标这样的透明图片，它可以按照您的方式悬停：

＆＃13;

         sha1  author                 date                         message  \
0  f0a332fc65  User 1  2017-01-30 17:26:51  Merge branch 'dev' into master   
1  877134c7be  User 1  2017-01-30 14:46:55                     commitmsg 1   
2  557b90502d  User 1  2017-01-30 14:38:52                     commitmsg 2   
3  052788be45  User 2  2017-01-30 14:29:28                     commitmsg 3   

   changes  insertions  deletions  
0      NaN         NaN        NaN  
1      1.0        15.0        NaN  
2     10.0        51.0       56.0  
3      1.0         NaN        1.0

＆＃13;

.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);
}

＆＃13;

Answer 5

我不确定你究竟想要什么。如果您希望背景在悬停在其上时改变颜色，请在css中尝试：

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

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

Answer 6

你想要这样的东西： -

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

或

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 7

您无法更改图片的背景颜色，但可以使用css filters。滤镜会使图像产生模糊，饱和等效果。

Answer 8

我的解决方案是在该图像的顶部创建另一个透明背景色的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);
}

我想在悬停时更改图像的背景颜色

8 个答案: