Question

我想在png图像本身周围创建一个悬停，但是我在整个网格上悬停。安娜的帮助将不胜感激。我只想要仅在android png图像周围的阴影。

.button1 {
    border: none;
    background-repeat: no-repeat;
    background-size:100%;
    width: 100%;
    height: 100%;
    text-decoration: none;
    
    font-size: 16px;
    
    cursor: pointer;
    outline: none;
}


.button3:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

<!DOCTYPE html>
<html>


<body>
    <div class="grid">
           
 <button id="btnMakeCall" class ="button1 button3">
<img src="http://pngimg.com/uploads/android_logo/android_logo_PNG34.png" style="width:80%; height:auto;" />

 </button>

   </div>
</body>

</html>

Answer 1

您将无法通过使用标准PNG文件来实现此目的。 Android徽标的背景可能是透明的，但是它的尺寸仍使其形状为四边形（这就是为什么您的图像（悬停时在按钮后面显示阴影）的原因）。您可以通过执行@Pete建议的操作或创建一个image sprite来获得所需的结果。

Example

如何在CSS中围绕Png图像本身创建悬停

1 个答案: