我想在懸停時更改圖像的背景顏色

Question

這是我的小提琴：

.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.設置容器div的width和height 。

4.現在，要使圖像適合容器，您需要將圖像的width設置為100%並將max-height設置為100% 。

5.然后在容器div上設置use :hover ，並將background-color設置為所需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 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

您的示例圖片沒有透明背景，如果您使用透明圖片（如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 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

您想要這樣的東西嗎：

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

您不能更改圖像的背景顏色，但可以使用CSS濾鏡 。 濾鏡使您的圖像具有模糊，飽和的效果。

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