我想改變形象的背景顏色上徘徊

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。過濾器會使圖像產生一些效果，如模糊，飽和。