Safari中帶有邊框半徑和：hover錯誤的圖像

Question

將鼠標懸停在具有邊框半徑的圖像上時，即使光標位於剪切的圖像外部（包含圖像的正方形內部），也將設置樣式。

這發生在Safari中； 它可以在Firefox和Chrome中正常運行。 有什么辦法可以使用CSS修復它嗎？

 .imagen { border-radius: 50%; } .imagen:hover { opacity: .5; } 

 <img src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Vado_l_ammazzo_e_torno-George_Hilton.jpg" class="imagen" /> 

Answer 1

最好的跨平台解決方案可能是將CSS url()函數與background屬性一起使用：

 #image { border-radius: 50%; height: 250px; width: 250px; background: url('https://upload.wikimedia.org/wikipedia/commons/a/a0/Vado_l_ammazzo_e_torno-George_Hilton.jpg') 0px 0px/contain; } #image:hover { opacity: .5; } 

 <div id='image'></div>